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>