Navigator的基本使用
Navigator 是什么?
一个导航组件
进入下一个界面,返回上一个界面
传递数据给下一个界面 , 返回数据给上一个界面
如何使用Navigator
导入Navigator-----> render中返回Navigator----->调用Navigator的相应方法
注意如果使用TabNavigator要
npm install react-native-tab-navigator --save
下面是StackNavigator的使用案例:
import React from 'react'; import { AppRegistry } from 'react-native'; import { Button, View, Text } from 'react-native'; import { createStackNavigator } from 'react-navigation'; // Version can be specified in package.json class HomeScreen extends React.Component { render() { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Home Screen</Text> <Button title="Go to Details" onPress={() => this.props.navigation.navigate('Details')} /> </View> ); } } class DetailsScreen extends React.Component { render() { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Details Screen</Text> </View> ); } } const RootStack = createStackNavigator( { Home: HomeScreen, Details: DetailsScreen, }, { initialRouteName: 'Home', } ); export default class App extends React.Component { render() { return <RootStack />; } } AppRegistry.registerComponent('ReactNative1', () => App);
将这部分代码放在index.js中,就能实现页面间的跳转和返回功能;