【水滴石穿】rnTest

其实就是一个小的demo，不过代码分的挺精巧的

先放地址：https://github.com/linchengzzz/rnTest

来看看效果









确实没有什么可以说的，不过代码部分还行

先入口文件

//index.js
/** @format */

import {AppRegistry} from 'react-native';
import App from './src/App';
import {name as appName} from './src/app.json';

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

看一下项目目录

在app.js中我们会引用

//src/App.js
import React from "react";
import { createAppContainer} from "react-navigation";
//定义的是
import RootStack from './navigation/RootStack';

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {
    render() {
        return <AppContainer />;
    }
}

在appNavigator中是可渲染页面的切换入口

//src/navigation/AppNavigator.js
import {createStackNavigator} from "react-navigation";
//引入home页面
import HomeScreen from '../pages/Home';
//引入详情页
import DetailsScreen from '../pages/Details';

export default createStackNavigator({
    Home: {
        screen: HomeScreen,
        mode: 'card'
    },
    Details: {
        screen: DetailsScreen,
        mode: 'card'
    }
});

rootstack.js可以看作是根引用tab切换目录

//src/navigation/RootStack.js
import {createStackNavigator} from "react-navigation";
import AppNavigator from './AppNavigator';

export default createStackNavigator(
    {
        Main: {
            screen: AppNavigator,
        }
    },
    {
        mode: 'card',
        headerMode: 'none',
    }
);

接下来看页面

//src/pages/Home.js
import React from "react";
import {Button, Text, View} from "react-native";

export default class HomeScreen extends React.Component {
    render() {
        return (
            <View style={{flex: 1, alignItems: "center", justifyContent: "center"}}>
                <Text>Home Screen</Text>
                <Button
                    title="Go to Details"
                    onPress={() => this.props.navigation.navigate('Details', {name: 'linchengzzz'})}
                />
            </View>
        );
    }
}

//src/pages/Details.js
import React from "react";
import {Button, Text, View} from "react-native";

export default class DetailsScreen extends React.Component {
    render() {
        const { navigation } = this.props;
        const name = navigation.getParam('name');
        return (
            <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
                <Text>Details Screen {name}</Text>
                <Button
                    title="Go to Details.t.. again"
                    onPress={() => this.props.navigation.push('Details')}
                />
                <Button
                    title="Go to Home"
                    onPress={() => this.props.navigation.navigate('Home')}
                />
                <Button
                    title="Go back"
                    onPress={() => this.props.navigation.goBack()}
                />
            </View>
        );
    }
}

哎，，，，，，就那里一点是亮点