錯誤時，與相鄰的元素反應本土

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

在反應中，您需要在渲染方法中返回單個組件/元素。

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

由於反應的v0.16您可以返回元素/組件的數組。 More info here.

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

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