在本机应用程序中使用 react-navigation 进行导航
借助 react-navigation ,你可以非常轻松地为应用添加导航。
安装反应导航
npm install --save react-navigation
例:
import { Button, View, Text, AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation';
const App = StackNavigator({
FirstPage: {screen: FirstPage},
SecondPage: {screen: SecondPage},
});
class FirstPage extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
const { navigate } = this.props.navigation;
return (
<Button
title='Go to Second Page'
onPress={() =>
navigate('SecondPage', { name: 'Awesomepankaj' })
}
/>
);
}
}
class SecondPage extends React.Component {
static navigationOptions = ({navigation}) => ({
title: navigation.state.params.name,
});
render() {
const { goBack } = this.props.navigation;
return (
<View>
<Text>Welcome to Second Page</Text>
<Button
title="Go back to First Page"
onPress={() => goBack()}
/>
</View>
);
}
}