当相邻元素与本机反应时出错

Question

我对react-native很陌生，并且对这段代码有问题：

  import React, { Component, PropTypes, View } from 'react'
import { connect } from 'react-redux'
import StartupActions from '../Redux/StartupRedux'
import ReduxPersist from '../Config/ReduxPersist'
import { StackNavigator } from 'react-navigation'
import WelcomeContainer from '../Containers/WelcomeContainer'
import SettingsContainer from '../Containers/SettingsContainer'
import About from '../Components/About'
import { Header } from 'react-native-elements'

const AppNavigator = StackNavigator({
  Home: {
    screen: WelcomeContainer,
    navigationOptions: {
      title: 'Multi Language Sample App' // we advice using something static like your app's name or company name on the startup screen
    }
  },
  Settings: {
  screen: SettingsContainer,
  navigationOptions: ({navigation}) => ({
    title: navigation.state.params.title
  })
},
  About: {
  screen: About,
  navigationOptions: ({navigation}) => ({
    title: navigation.state.params.title
  })
}
})
class RootContainer extends Component {
  componentDidMount() {
    if (!ReduxPersist.active) {
      this.props.startup()
    }
  }
  render() {
    return (
      <View>
      <AppNavigator />
      <AppNavigator />
      </View>
    )
  }
}
const mapStateToDispatch = dispatch => ({
  startup: () => dispatch(StartupActions.startup())
})

export default connect(null, mapStateToDispatch)(RootContainer)
RootContainer.propTypes = {
  startup: PropTypes.func.isRequired
}

我收到错误：相邻的 JSX 元素必须包装在封闭标记中。

我

发现了具有相同问题的不同帖子，但无法解决我的问题。

Answer 1

将代码包含在视图或其他父元素中。

render() {
    return (
       <View>
            <AppNavigator />
            <Button
                 large
                 icon={{name: 'envira', type: 'font-awesome'}}
                 title='LARGE WITH RIGHT ICON' />
      </View>
      )
  }
}

Answer 2

在 react 中，您需要在渲染方法中返回单个组件/元素。

render() {
    return (
      <View>
        <AppNavigator />
        <Button
          large
          icon={{name: 'envira', type: 'font-awesome'}}
          title='LARGE WITH RIGHT ICON'
        />
     </View>
    )
  }
}

从 react 的 v0.16 开始，您可以返回元素/组件数组。更多信息在这里。

新的渲染返回类型：片段和字符串 您现在可以返回 组件的呈现方法中的元素数组。像其他一样 数组，您需要为每个元素添加一个键以避免键 警告

render() {
    return (
        [<AppNavigator />, <Button large icon={{name: 'envira', type: 'font-awesome'}} title='LARGE WITH RIGHT ICON' />]
    )
  }
}