反应原生

Question

我是新的反应原生框架并学习如何使用导航器。我尝试在两页APP之间实现跳转。来自＆＃34;男孩＆＃34;到＆＃34;女孩＆＃34;然后回到＆＃34;男孩＆＃34;。 这是APP.js中的代码：

 /**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component, } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Image,
} from 'react-native';
import Boy from './Boy';
import {Navigator} from 'react-native-deprecated-custom-components';
import TabNavigator from 'react-native-tab-navigator';

export default class imooc_gp extends Component {
    constructor(props){
        super(props);
        this.state = {
            selectedTab:'tb_popular',
        }
    }
    render() {
        return (
            <View style={styles.container}>
                <Navigator
                    initialRoute = {{
                        title:'example',
                        component: Boy
                    }}
                    renderScene = {(route, navigator) =>{
                        let Component = route.component;
                        return <Component navigator = {navigator} {...route.params}/>
                    }}
                ></Navigator>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    page1 :{
        flex: 1,
        backgroundColor: 'red',
    },
    page2: {
        flex: 1,
        backgroundColor: 'yellow',
    },
    image: {
        height: 22,
        width: 22,
    }

});

Boy.js：

import React, {Component} from 'react';
import {
    View,
    Text,
    StyleSheet
}from 'react-native';
import Girl from './Girl';

export default class Boy extends Component{
    constructor(props){
        super(props);
        this.state = {
            word: ''
        }
    }
    render(){
        return (
            <View style = {styles.container}>
                <Text style = {styles.text}> I am a boy</Text>
                <Text style = {styles.text}
                    onPress = {()=>{
                        this.props.navigator.push({
                            title:'Girl',
                            component: Girl,
                            params:{
                                word: 'A Rose',
                                onCallBack: (word)=>{
                                    this.setState({
                                        word: word
                                    })
                                }
                            }
                        })
                    }}>Send girl a Rose</Text>
                <Text style = {styles.text}>{this.state.word}</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'gray',
        justifyContent: 'center'
    },
    text: {
        fontSize: 20,
    }
})

Girl.js：

import React, {Component} from 'react';
import {
    View,
    Text,
    StyleSheet
}from 'react-native';

export default class Girl extends Component{
    constructor(props){
        super(props);
        this.state = {

        }
    }
    render(){
        return(
            <View styles = {styles.container}>
                <Text style = {styles.text}> I am a Girl</Text>
                <Text style = {styles.text}>{this.state.word}</Text>
                <Text style = {styles.text}
                    onPress = {()=>{
                        this.props.onCallBack('A box of chocolate')
                        this.props.navigator.pop()
                    }}>return chocolate</Text>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'red',
        justifyContent: 'center',

    },
    text: {
        fontSize: 22
    }
})

我收到了iPhone模拟器上显示的错误消息：

我猜错误可能是由于Navigator在不同的react-native版本中的错误使用语法造成的。

Answer 1

根据我的经验，我发现使用反应导航库更有用。这允许您创建一个路由器文件，列出您希望应用程序导航的所有页面;在你的情况下，它可能是Boy.js和Girl.js.示例如下：

import React from 'react';
import { StackNavigator } from 'react-navigation';
import { Boy, Girl } from '../app';

export const Screens = StackNavigator({
    Boy: {
        screen: Boy,
    },
    Girl: {
        screen: Girl
    }
});

一旦你渲染了Screen组件，Boy.js和Girl.js将通过“navigation.navigate”道具访问另一个屏幕。

所以在你的Boy组件中，而不是：

                   onPress = {()=>{
                        this.props.navigator.push({
                            title:'Girl',
                            component: Girl,
                            params:{
                                word: 'A Rose',
                                onCallBack: (word)=>{
                                    this.setState({
                                        word: word
                                    })
                                }
                            }
                        })

你可以写一下：

this.props.navigation.navigate("Girl")

您需要做的就是导入Girl组件。

希望这有帮助！