- 安装最新版本:npm install –save react-navigation
- 在App.js中引入StackNavigator依赖库,并且注册需要跳转的界面
//引入react-navigation依赖库
import {
StackNavigator,
} from 'react-navigation';
//展示的页面
import MainPage from './view/MainPage';
import newsList from './view/newsList';
import BasicInfo from './view/BasicInfo';
export default App = StackNavigator({
//每一个页面的配置
MainPage: {
screen: MainPage
},
newsList: {
screen: newsList
},
BasicInfo: {
screen: BasicInfo
},
});
3.在MainPage页面,配置title,添加按钮,onPress触发跳转,其中跳转的页面需在App中注册
class MainPage extends Component{
static navigationOptions = {
title: 'Home',
};
render() {
const { navigate } = this.props.navigation;
return (
<View>
<Button
//第一个参数为跳转到的界面,第二个为传入的参数
onPress = {()=> navigate('newsList',{name:'Bob'})}
title = "Go to "
/>
</View>
);
}
}
4.在跳转之后的界面获取传递的参数并显示
class newsList extends Component{
static navigationOptions = {
title: 'newsList',
};
render(){
const {params} = this.props.navigation.state;
return (
<View style={styles.container}>
<TouchableOpacity style={styles.button} activeOpacity={0.5}>
<Text style={{color: 'white'}}>Hello {params.name}</Text>
</TouchableOpacity>
</View>
);
}
}
持续TabNavigator….