Question

我想在同一页面中使用导航视图和另一个视图。我怎么能这样做？

此代码成功运行

const MyNav = TabNavigator({
  News: { screen: NewsScreen },
  Videos: { screen: VideosScreen },
  Bands: { screen: BandsScreen },
  Jokes: { screen: JokesScreen },
}, {
  tabBarPosition: 'top',
  animationEnabled: true,
  tabBarOptions: {
    activeTintColor: '#e91e63',
  },
});


export default class App extends Component<{}> {
  render() {
    return <MyNav/>;
  }
}

但是当我以这种方式尝试时它会返回错误

export default class App extends Component<{}> {
  render() {
    return(
    	<View>
    		<MyNav/>
        <View>
          //Something i want
        </View>
    	</View>
    );
  }
}

我该如何解决这个问题？

Answer 1

React Native不支持开箱即用的多个导航。您需要手动执行此操作。更多信息：React Native : multiple Navigator navigationBar

另请注意这里的错误：

    <View>
      //Something i want
    </View>

当你在render方法中时，它不是JS代码，而是JSX。所以你不能像往常一样用//写评论。正确的语法是{/* Comments */}。

Answer 2

如果要在render（）中返回多个View，则应按数组对它们进行分组。

像，

return (
 [
  <View key="1">
    <Something/>
  </View>,

  <View key="2">
    <Something/>
  </View>
 ]

）;

Answer 3

将您的另一个视图或任何其他元素包装在单个父视图中。您只能返回单个视图。像这样的东西

export default class App extends Component<{}> {
  render() {
    return(
    	<View>
            <View>
    		    <MyNav/>
            </View>
            <View>
               //Something
            </View>            
    	</View>
    );
  }
}

Answer 4

执行以下步骤

首先导入反应导航。第二个createStack导航器，然后是诸如createAppContainer之类的容器。

import { createStackNavigator, createAppContainer } from 'react-navigation';

const App = createStackNavigator({
    GetStartedPage: { screen: GetStartedController }, 
    LoginPage: { screen: LoginController }, 

  },
  {
    initialRouteName: 'GetStartedPage',
  },
);

export default createAppContainer(App);

React Native中的React Navigation错误

4 个答案: