【水滴石穿】rnTest

2019-05-24 11:42:07 阅读：260 来源： 互联网

标签：src js react rnTest Details import 水滴石穿 navigation

其实就是一个小的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>
        );
    }
}

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

标签：src,js,react,rnTest,Details,import,水滴石穿,navigation
来源： https://www.cnblogs.com/smart-girl/p/10917066.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

【水滴石穿】rnTest