[英]Error when Adjacent elements with react native
I am very new with react-native
and have trouble with this code: 我是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
}
I get the error : Adjacent JSX elements must be wrapped in an enclosing tag. 我收到错误消息:相邻的JSX元素必须包装在一个封闭的标记中。
I found different posts with the same issue but was not able to solve my problem. 我发现具有相同问题的其他帖子,但无法解决我的问题。
Enclose you code inside view or another parent element. 将代码封装在view或另一个父元素中。
render() {
return (
<View>
<AppNavigator />
<Button
large
icon={{name: 'envira', type: 'font-awesome'}}
title='LARGE WITH RIGHT ICON' />
</View>
)
}
}
In react you need to return a single component/element in your render method. 作为响应,您需要在render方法中返回单个组件/元素。
render() {
return (
<View>
<AppNavigator />
<Button
large
icon={{name: 'envira', type: 'font-awesome'}}
title='LARGE WITH RIGHT ICON'
/>
</View>
)
}
}
Since v0.16 of react you can return an array of elements/components. 从react v0.16开始,您可以返回一个元素/组件数组。 More info here. 更多信息在这里。
New render return types: fragments and strings You can now return an array of elements from a component's render method. 新的渲染返回类型:片段和字符串现在,您可以从组件的render方法返回元素数组。 Like with other arrays, you'll need to add a key to each element to avoid the key warning 与其他数组一样,您需要向每个元素添加键,以避免键警告
render() {
return (
[<AppNavigator />, <Button large icon={{name: 'envira', type: 'font-awesome'}} title='LARGE WITH RIGHT ICON' />]
)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.