react native跨界面传输数据实例（已完成）

 

// App.js
import React, {Component} from 'react';
import ChoosePage from './src/choosePage';

type Props = {};
export default class App extends Component<Props> {
    render() {
        return (
            <ChoosePage/>

        );
    }
}

// choosePage.js
import React, {Component} from 'react';
import page1 from './page1';
import page2 from './page2';
import {
    StackNavigator
} from 'react-navigation';

export default class choosePage extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <MyNavigator/>
        );
    }
}
const MyNavigator = StackNavigator({
    p1: {screen: page1},
    p2: {screen: page2},
}, {
    initialRouteName: 'p1',
});

// page1.js
import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    TextInput
} from 'react-native';

export default class page1 extends Component<Props> {
    static navigationOptions = {    //上标题
        title: '第一页',
    };

    constructor(props) {
        super(props);
        this.state = {text: ' '};
    }

    render() {
        const {navigate} = this.props.navigation;
        return (
            <View>
                <TextInput
                    onChangeText={(text) => {
                        this.setState({text})
                    }}
                    value={this.state.text}
                />
                <TouchableOpacity
                    onPress={() => {
                        navigate('p2', {message: this.state.text});
                    }}>
                    <Text>点我去第二页！</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

// page2.js
import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity
} from 'react-native';

export default class page2 extends Component<Props> {
    static navigationOptions = {    //上标题
        title: '第二页',
    };

    render() {
        const {params} = this.props.navigation.state;
        return (
            <View>
                <Text>欢迎来到第二页！</Text>
                <Text>{'传来的参数是：' + params.message}</Text>
                <TouchableOpacity onPress={() => {
                    this.props.navigation.goBack()
                }}
                >
                    <Text>
                        点我返回
                    </Text>
                </TouchableOpacity>
            </View>

        );
    }
}

注意：界面跳转时需要在项目中输入npm install --save react-navigation或者yarn add react-navigation

如图：注意是在项目内的控制台输入。输入后才能正确只能提醒并使用（如果已经安装yarn，建议使用yarn add react-navigation   因为这个速度快）

 

若有疑问，敬请评论。

 

 

附：

规范化文件布局：https://blog.csdn.net/qq_41915690/article/details/80216039

React native 纯页面跳转功能代码：https://blog.csdn.net/qq_41915690/article/details/80215817

运行项目简易方法：https://blog.csdn.net/qq_41915690/article/details/80155372

初次运行项目会遇到的问题解决方法：https://blog.csdn.net/qq_41915690/article/details/80289475