【React Native】页面跳转（七）

本文学习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>

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>

二、页面跳转如何传参？

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>

（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>        );

demo地址