【水滴石穿】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>

        );

    }

}

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

巴特西

【水滴石穿】rnTest

最新文章

热门文章