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中,就能实现页面间的跳转和返回功能;