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裏面去取傳遞過來的參數