本文學習React Native如何進行頁面跳轉，以及頁面跳轉間引數傳遞。

目前React Native中文網主推的頁面跳轉方式為React Navigation。它的使用非常簡單：

1、安裝導航庫：npm install --save react-navigation

2、引入 import {StackNavigator}  from 'react-navigation';

3、StackNavigator的宣告：

const App = StackNavigator({
    List: {screen: List},
    Detail: {screen: Detail},
});
 

以上程式碼就可完成路由的配置，可以看到我一共配置了兩個頁面。一個是產品列表頁List.js，另一個是產品詳情頁Detail.js。

假設頁面A要調到頁面B，B再回退到A。

一、如何頁面跳轉？

1、從props中取出navigation的navigate方法（只要把元件加入到StackNavigator中，就會自動傳入props）；

const {navigate} = this.props.navigation;

2、通過navigate方法跳轉

	<View>
                <FlatList
                    style={styles.row}
                    numColumns={3}
                    keyExtractor={item => item.id}
                    onRefresh={this.fetchdata}
                    refreshing={refreshing}
                    data={movies}
                    renderItem={
                 ({item}) =>
                 <Item
                 title={item.title}
                 image={item.images.medium}
                 stars={item.rating.stars}
                 onPress={() => navigate('Detail',{
                     id: item.id,
                 })}/>
                 }
                />
            </View>
 
<View>
                <FlatList
                    style={styles.row}
                    numColumns={3}
                    keyExtractor={item => item.id}
                    onRefresh={this.fetchdata}
                    refreshing={refreshing}
                    data={movies}
                    renderItem={
                 ({item}) =>
                 <Item
                 title={item.title}
                 image={item.images.medium}
                 stars={item.rating.stars}
                 onPress={() => navigate('Detail',{
                     id: item.id,
                 })}/>
                 }
                />
            </View>

3、通過navigate回退

（1）取出navigation的goBack方法

const {goBack} = this.props.navigation;

（2）呼叫goBack方法

 	    <View>
                <Text>電影詳情頁</Text>
                <Text>電影id：{state.params.id}</Text>
                <Text onPress={() => goBack()}>返回</Text>
            </View>	    <View>
                <Text>電影詳情頁</Text>
                <Text>電影id：{state.params.id}</Text>
                <Text onPress={() => goBack()}>返回</Text>
            </View>

二、頁面跳轉如何傳參？

1、B如何接收值？

const {state} = this.props.navigation;

從navigation中取出state值，這個值就是頁面跳轉傳過來的值

2、A如何收到B回退傳過來的值？

（1）在A中定義一個callback方法，並且把callback方法傳給B

a）在state中加一個childState

    state = {
        movies: movies.subjects,
        refreshing: false,
        childState: '',
    };

b）在render中取出childState

const {movies, refreshing, childState} = this.state;

c）定義一個callback方法，在callback中setState

          <View>
                <Text>子元件返回的資料：{childState}</Text>
                <FlatList
                    style={styles.row}
                    numColumns={3}
                    keyExtractor={item => item.id}
                    onRefresh={this.fetchdata}
                    refreshing={refreshing}
                    data={movies}
                    renderItem={
                 ({item}) =>
                 <Item
                 title={item.title}
                 image={item.images.medium}
                 stars={item.rating.stars}
                 onPress={() => navigate('Detail',{
                     id: item.id,
                     callback: (data) => {
                         this.setState({
                             childState: data
                         })
                     }
                 })}/>
                 }
                />
            </View>callback: (data) => {
                         this.setState({
                             childState: data
                         })
                     }
                 })}/>
                 }
                />
            </View>

（2）在B中傳值

a）從navigation中取出state值

const {state, goBack} = this.props.navigation;

b）通過state的callback方法回撥

	return (
            <View>
                <Text>電影詳情頁</Text>
                <Text>電影id：{state.params.id}</Text>
                <Text onPress={() => {
                    state.params.callback("test");
                    goBack();
                }}>返回</Text>
            </View>

        );return (
            <View>
                <Text>電影詳情頁</Text>
                <Text>電影id：{state.params.id}</Text>
                <Text onPress={() => {
                    state.params.callback("test");
                    goBack();
                }}>返回</Text>
            </View>

        );