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方法中返回单个组件/元素。

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

从反应的v0.16开始，你可以返回一个元素/组件数组。 More info here.

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

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

具有反应原生的相邻元素时出错

2 个答案: