RN react-navigation 3 的使用

基于 3.3.2 测试。(PS:这个版本变的真快啊,我一年前还在用 1.5.11,导致很多API 变了都有点不知所措,重新学习一下基础啊。)

简单代码:

import React from 'react';
import { View, Text, Button } from 'react-native';
import { createAppContainer, createStackNavigator, StackActions, NavigationActions } from 'react-navigation';

class HomeScreen extends React.Component {
    static navigationOptions = {
        title: 'Home Screen',
    }

    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Home Screen</Text>
                <Button
                    title="Go to Details"
                    onPress={() => {
                        // this.props.navigation.dispatch(StackActions.reset({
                        //     index: 0,
                        //     actions: [
                        //         NavigationActions.navigate({ routeName: 'Details' })
                        //     ],
                        // }))
                        this.props.navigation.navigate('Details',{content:'木子才'})
                    }}
                />
            </View>
        );
    }
}

class DetailsScreen extends React.Component {
    static navigationOptions = ({ navigation }) => {
        return {
            title: `Chat with ${navigation.state.params.content}`,
        };
    };

    render() {
        const { params } = this.props.navigation.state;
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Details Screen with {params.content}</Text>
                <Button title="Go to Back" onPress={() => this.props.navigation.goBack()}/>
            </View>
        );
    }
}

const RootStack = createStackNavigator({
    Home: {
        screen: HomeScreen,
    },
    Details: {
        screen: DetailsScreen,
    },
}, {
    initialRouteName: 'Home',
});

const AppContainer = createAppContainer(RootStack);

// export default createAppContainer(RootStack);
export default class App extends React.Component<Props> {
    constructor(props) {
        super(props)
    }

    render() {
        return <AppContainer />;
    }
}