react-navigation 之StackNavigator

这里写三个界面为栗子
StackNavigator 会按添加的顺序直接先显然Reactnav这个界面
先附上效果图

QQ20170620-135904.gif

步骤1

import  Reactnav from  './Components/ReactNav';
import  ReactSecNav from  './Components/ReactNavSec'
import ReactThirdNav from  './Components/ReactThiNav'

const  App = StackNavigator({
    Home:{screen:Reactnav},
    NavSec:{screen:ReactSecNav},
    NavThird:{screen:ReactThirdNav},
});

AppRegistry.registerComponent('RN044Demo', () => App);

步骤2

export default class ReactNav extends Component {
    render() {
        const  {navigate} = this.props.navigation; //使用这种引入方式更加简单
        return (
            <View style={styles.container}>
                <Button
                    title="跳转到第二个页面"
//navigate('NavThird') 不带参数直接push
//navigate('NavThird',{passTitle:'由第二传值到第三'})带参数push,且同样格式可带多个
//navigate('NavThird',{passTitle:'由第二传值到第三'，callBack:(data)=>{}})生明可回调的函数，data为回调的数据
                    onPress={()=>navigate('NavSec',{user:'第一界面传真到第二显示',callBack:(backData)=>{alert(backData)}}
                    )}
                />
            </View>
        );
    }
    static  navigationOptions = {
        title: '标题1'
    }
}

步骤3

export default class ReactNavSec extends Component {
    back =(state,goBack)=>{ //把属性传递过来，然后进行使用
        state.params.callBack('this is back data ') //回调传值
        goBack() //点击POP上一个页面得方法
    }
    render() {
        const  {navigate,state,goBack,} = this.props.navigation;
        return (
            <View style={styles.container}>
                <Button
                    title={state.params.user} //取得正向传值
                    onPress={()=>this.back(state,goBack)}
                />
                <Button
                    title={state.params.user} //取得正向传值
                    onPress={()=>navigate('NavThird',{passTitle:'由第二传值到第三'})}
                />
            </View>
        );
    }
    static  navigationOptions = {
        title: '标题2'
    }
}

export default class ReactThiNav extends Component {
    render() {
        const  {navigate,goBack,state} = this.props.navigation;
        return (
            <View style={styles.container}>
                <Button
                    title={state.params.passTitle}
                    onPress={()=>{goBack()}}
                />
            </View>
        );
    }
    static  navigationOptions = {
        title: '标题3'
    }
}