react native navigation的使用方法总结（带传参和接收参数）

一 、StackNavigator

1.下载运行安装

npm install --save react-navigation

2.在需要用的页面   导入

import {StackNavigator} from 'react-navigation';

3.使用

import Addfrom './Add';
import Delete from './Delete'

const App = StackNavigator({
    Delete: {screen: Delete},
    Add: {screen: Add},
    Cate: {screen: Cate}
});
export default App;

在StackNavigator里面把需要路由导航的参数放进去，给每一个页面设置一个标题

export default class Add extends React.Component {
 
 
    static navigationOptions = {
        title: 'Welcome',
    };

然后使用

使用navigate()方法来执行跳转

navigate('Cate', {data:data})

 

前面Cate为你定义的页面名字，后面｛｝内包括你要传的参数，可为空，

例如  navigate('Cate')，

this.props.navigation.navigate("Cate",{item:value});

在Cate页面写接收参数的方法：

	let {item} = this.props.navigation.state.params;
<Text style={styles.device}>{item.title}</Text>

注意：此处一定是在navigation下的state里面的params里面去取传递过来的参数