React Native中Navigator的安装与使用

最新推荐文章于 2019-04-03 00:25:00 发布

原创最新推荐文章于 2019-04-03 00:25:00 发布 · 446 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react-native #Navigator

react-native 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍如何在React Native项目中安装并使用Navigator组件，通过一个男生送玫瑰给女生，女生回赠巧克力的故事，演示了父子组件间的数据传递和状态更新。

一、安装Navigator

1.安装react-native-deprecated-custom-components

npm install react-native-deprecated-custom-components  --save

2.若npm安装报错，则执行下面命令

npm i react-native-deprecated-custom-components  --save

3.若还未解决则使用yarn命令（前提是自己有yarn的配置环境）

yarn add react-native-deprecated-custom-components  --save

二、使用Navigator

说明：本demo为男生给女生送一枝玫瑰，女生回赠巧克力。包含了父子组件的通信

1.引入Navigator

import {Navigator} from "react-native-deprecated-custom-components"

2.页面A（用于放置父组件Boy和子组件Girl）：

<Navigator
                initialRoute={{
                    //Boy为默认显示组件
                    component: Boy
                }}
                renderScene={(route,navigator)=>{
                    let Component = route.component;
                    return <Component navigator={navigator} {...route.params}/>
                }}
            ></Navigator>

3.父组件Boy（父组件）：

<View style={styles.container}>
                <Text style={styles.text}>I am Boy</Text>
                <Text
                    style={styles.text}
                    onPress={
                        ()=>{
                            this.props.navigator.push({
                                component:Girl,
                                params:{
                                    word:'一枝玫瑰',
                                    onCallBack:(word)=>{
                                        this.setState({
                                            word:word
                                        })
                                    }
                                }
                            })
                        }
                    }
                >送女孩一支玫瑰</Text>
                <Text style={styles.text}>{this.state.word}</Text>
            </View>

4.子组件Girl（子组件）：

<View style={styles.container}>
                <Text style={styles.text}>
                    I am Girl.
                </Text>
                <Text style={styles.text}>
                    我收到了男孩送的玫瑰{this.props.word}
                </Text>
                <Text
                    style={styles.text}
                    onPress={
                        ()=>{
                            this.props.onCallBack('一盒巧克力');
                            //删除组件
                            this.props.navigator.pop()
                        }
                    }
                >
                    回赠巧克力
                </Text>
            </View>