react-navigation使用之嵌套和跳转

Posted 天清云澈

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react-navigation使用之嵌套和跳转相关的知识,希望对你有一定的参考价值。

1. 新版react-native已经将react-navigation作为官方版本发布,基础Demo可以从官方网站获得,比较困扰的问题是组件的嵌套和第二、第三页面的跳转。

2. 组件嵌套问题:

要在父组件定义出指定父组件的router=子组件的router;同时,在子组件赋值navigation属性。

class AllContactsScreen extends React.Component {
    render() {return (
            <View>
                <Text>List of all contacts</Text>
                <ItemBlock title="hello world" navigation={this.props.navigation}/>
            </View>
        );
    }
}
AllContactsScreen.router = ItemBlock.router;

在子组件中定义跳转函数,子组件的代码如下:

export default class ItemBlock extends Component{
    render(){return(
            <View>
                <Button
                    onPress={this.click.bind(this)}
                    title="Chat with Lily"
                />
            </View>
        );
    }
    click(){
        const { navigate } = this.props.navigation;
        navigate(‘Chat‘);
    }
}

3. 第二、第三页面的跳转,也是在定义StackNavigator时指定,StackNavigator只定义一次。

const SimpleApp = StackNavigator({
    Home: {
        screen: MainScreenNavigator,
        navigationOptions: {
            title: ‘My Chats‘,
        },
    },
    Chat: { screen: ChatScreen },
    ChatDetail: {screen: ChatDetail}
})

第二页面的代码如下:

export  default  class ChatScreen extends React.Component {
    static navigationOptions = {
        title: ‘Chat with Lucifa‘,
    };
    render() {
        return(
            <View>
                <Button
                    onPress={this.click.bind(this)}
                    title="Chat with Lucky"
                />
            </View>
        );
    }
    click(){
        const { navigate } = this.props.navigation;
        navigate(‘ChatDetail‘);
    }
}

第三页面就可以随便写了。

以上。

以上是关于react-navigation使用之嵌套和跳转的主要内容,如果未能解决你的问题,请参考以下文章

JS基础-循环语句和跳转语句

A标签执行js 代码和跳转

选择和跳转语句

react-navigation 从嵌套导航器更改活动选项卡

react-navigation 3 在嵌套堆栈中重置

web下载文件和跳转