與鄰元素發生本機反應時出錯

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

將代碼封裝在view或另一個父元素中。

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

Answer 2

作為響應，您需要在render方法中返回單個組件/元素。

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

從react v0.16開始，您可以返回一個元素/組件數組。 更多信息在這里。

新的渲染返回類型：片段和字符串現在，您可以從組件的render方法返回元素數組。 與其他數組一樣，您需要向每個元素添加鍵，以避免鍵警告

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