react-native Navigator Best Practices Use react-navigation for navigation in react native apps
Example
With the help of react-navigation, you can add navigation to your app really easy.
Install react-navigation
npm install --save react-navigationExample:
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>
);
}
}
