ReactNative页面跳转

使用Navigation实现界面导航与跳转

首先安装导航库

npm install --save react-navigation

如果提示如下信息

npm WARN enoent ENOENT: no such file or directory, open '***\nodejs \package.json' npm

则进入到node_modules目录下进行安装

在index.js 中配置应用的首页

AppRegistry.registerComponent(appName, () => App);

//App是首页js的名字，首页是用来进行初始化配置的，如配置Navigator导航等

App首页配置Navigator

export default class App extends React.Component{
    //构造，初始化值可以写在这里
	constructor(props) {
        super(props);
        this.state={};
    }

	render(){
		let defaultName='HomePage';
		let defaultComponent=HomePage;
        return(
			<Navigator
			    //配置初始页及第一个页面
                initialRoute={{name:defaultName,component:defaultComponent}}
                
                //页面加载的动画
                configureScene={
					(route)=>{
						return  Navigator.SceneConfigs.VerticalDownSwipeJump;
					}
				}
                
                //配置导航的props属性navigator，其它页面也可以直接通过this.props.navitagor获取navigator
                renderScene={
					(route,navigator)=>{
						let Component=route.component
						return <Component {...route.param} navigator={navigator}/>
					}
				}
			/>
		);
	}
}

页面间跳转

HomePage页面

export default class HomePage extends Component<Props> {

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

    //点击跳转，方法名定义：方法名(){}
    _onPress() {
        const {navigator} = this.props;
        if (navigator) {
            navigator.push({
                name:"Second",
                component:Second,
            })
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <Button style={styles.welcome} title="Welcome to React Native" onPress={this._onPress.bind(this)}/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
});

Second页面

export default class Second extends Component {

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {};
    }

    _onBack(){
        const {navigator}=this.props;
        if(navigator){
            navigator.pop();
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <Button style={styles.container} onPress={this._onBack.bind(this)} title="Chat界面,点击返回"/>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
})