【水滴石穿】ReactNativeDemo

这个博主他的功底算是特别棒的了，能够把一些基础的例子，通过精巧的方式布局在一个小的demo里面

很值得我学习

放上博主的链接：https://github.com/jianiuqi/ReactNativeDemo



大概样式是这样

接下来我们来分析代码

//index.js
//根index.js引入的是src/app
/**
 * @format
 * @lint-ignore-every XPLATJSCOPYRIGHT1
 */

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

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

这个是main.js页面

//src/navigator/Main.js
import React, {Component} from 'react';
import {Button, Platform, StyleSheet, Text, View, Alert, Image, FlatList} from 'react-native';
import PropsDemo from "../simple/PropsDemo";
import TextInputDemo from "../widget/TextInputDemo";
import ButtonDemo from "../widget/ButtonDemo";
import SectionListDemo from "../widget/SectionListDemo";

type Props = {};

class Main extends Component<Props> {

    static navigationOptions = (navigation) => {
        return {
            title: '主页',
            headerStyle: {
                backgroundColor: '#f4511e',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
                fontWeight: 'bold',
            }
        };
    };

    render() {

        return (
            <View style={styles.container}>
                <FlatList
                    data={[
                        {key: 'Props（属性）', value: 'PropsDemo'},
                        {key: 'State（状态）', value: 'PropsDemo2'},
                        {key: 'State（状态）实例二', value: 'StateDemo'},
                        {key: '使用Flexbox布局', value: 'FlexDemo'},
                        {key: '处理文本输入', value: 'TextInputDemo'},
                        {key: '处理触摸事件', value: 'ButtonDemo'},
                        {key: 'Touchable使用示例', value: 'TouchableDemo'},
                        {key: '使用滚动视图', value: 'ScrollViewDemo'},
                        {key: '长列表数据', value: 'FlatListDemo'},
                        {key: '分组列表Demo', value: 'SectionListDemo'},
                    ]}
                    renderItem={({item}) => <Text style={styles.item} onPress={() => {
                        this.props.navigation.navigate(item.value);
                    }}>{item.key}</Text>}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 22
    },
    item: {
        padding: 10,
        fontSize: 18,
        height: 44,
    },
})

module.exports = Main;

//src/navigator/Setting.js
import React, {Component} from 'react';
import {Text, View} from "react-native";

class SettingsScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Text>Settings!</Text>
            </View>
        );
    }
}

module.exports = SettingsScreen;

//src/navigator/Detail.js
//详情页在手机上面没有找到
import React, {Component} from 'react';
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity, Button,
} from 'react-native';

class Detail extends Component {

    static navigationOptions = ({navigation, screenProps}) => ({

            headerTitle: navigation.state.params.key,
            //设置滑动返回的距离
            gestureResponseDistance: {horizontal: 300},

            //是否开启手势滑动返回，android 默认关闭 ios打开
            // gesturesEnabled: true,

            //设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题
            headerBackTitle: null,
            //导航栏的样式
            headerStyle: styles.headerStyle,
            //导航栏文字的样式
            headerTitleStyle: styles.headerTitleStyle,
            //返回按钮的颜色
            headerTintColor: 'white',

            //隐藏顶部导航栏
            // header: null,

            //设置顶部导航栏右边的视图  和 解决当有返回箭头时，文字不居中
            headerRight: (<View/>),

            //设置导航栏左边的视图
            // headerLeft: (<View/>),

        }

    );

    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity style={styles.button} activeOpacity={0.5}>
                    <Text style={{color: 'white'}}>跳转至带有菜单的导航栏页面</Text>
                </TouchableOpacity>
                <Text style={{marginTop: 10, color: 'black'}}>当前是Details页面</Text>
                <Button
                    title="Go to Details... again"
                    onPress={() => this.props.navigation.push('Detail', {key: 'push结果'})}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    button: {
        width: 240,
        height: 45,
        borderRadius: 5,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#4398ff',
    },
    headerStyle: {
        backgroundColor: '#4398ff',
    },
    headerTitleStyle: {
        color: 'white',
        //设置标题的大小
        fontSize: 18,
        //居中显示
        alignSelf: 'center',
    },
});

module.exports = Detail;

//
 // 是这种方式直接渲染跳过去的
        return (
            <View style={styles.container}>
                <FlatList
                    data={[
                        {key: 'Props（属性）', value: 'PropsDemo'},
                        {key: 'State（状态）', value: 'PropsDemo2'},
                        {key: 'State（状态）实例二', value: 'StateDemo'},
                        {key: '使用Flexbox布局', value: 'FlexDemo'},
                        {key: '处理文本输入', value: 'TextInputDemo'},
                        {key: '处理触摸事件', value: 'ButtonDemo'},
                        {key: 'Touchable使用示例', value: 'TouchableDemo'},
                        {key: '使用滚动视图', value: 'ScrollViewDemo'},
                        {key: '长列表数据', value: 'FlatListDemo'},
                        {key: '分组列表Demo', value: 'SectionListDemo'},
                    ]}
                    renderItem={({item}) => <Text style={styles.item} onPress={() => {
                        this.props.navigation.navigate(item.value);
                    }}>{item.key}</Text>}
                />
            </View>

//src/simple/PropsDemo.js
import React, { Component } from 'react';
import { Image } from 'react-native';

export default class PropsDemo extends Component {
    render() {
        let pic = {
            uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
        };
        return (
            <Image source={pic} style={{width: 193, height: 110}} />
        );
    }
}

//src/simple/PropsDemo2.js
import React, { Component } from 'react';
import { Text, View } from 'react-native';

class Greeting extends Component {
    render() {
        return (
            <View style={{alignItems: 'center'}}>
                <Text>Hello {this.props.name}!</Text>
            </View>
        );
    }
}

export default class PropsDemo2 extends Component {
    render() {
        return (
            <View style={{alignItems: 'center'}}>
                <Greeting name='Rexxar' />
                <Greeting name='Jaina' />
                <Greeting name='Valeera' />
            </View>
        );
    }
}

//src/simple/StateDemo.js
import React, { Component } from 'react';
import { Text, View } from 'react-native';

class Blink extends Component {
    constructor(props) {
        super(props);
        this.state = { isShowingText: true };

        // 每1000毫秒对showText状态做一次取反操作
        setInterval(() => {
            this.setState(previousState => {
                return { isShowingText: !previousState.isShowingText };
            });
        }, 2000);
    }

    render() {
        // 根据当前showText的值决定是否显示text内容
        if (!this.state.isShowingText) {
            return null;
        }

        return (
            <Text>{this.props.text}</Text>
        );
    }
}

export default class StateDemo extends Component {
    render() {
        return (
            <View>
                <Blink text='I love to blink' />
                <Blink text='Yes blinking is so great' />
                <Blink text='Why did they ever take this out of HTML' />
                <Blink text='Look at me look at me look at me' />
            </View>
        );
    }
}

//src/simple/FlexDemo.js
import React, { Component } from 'react';
import { View } from 'react-native';

export default class FlexDemo extends Component {
    render() {
        return (
            // 试试去掉父View中的`flex: 1`。
            // 则父View不再具有尺寸，因此子组件也无法再撑开。
            // 然后再用`height: 300`来代替父View的`flex: 1`试试看？
            <View style={{flex: 1}}>
                <View style={{flex: 1, backgroundColor: 'powderblue'}} />
                <View style={{flex: 2, backgroundColor: 'skyblue'}} />
                <View style={{flex: 3, backgroundColor: 'steelblue'}} />
                <View style={{width:200, height:100, backgroundColor: 'purple'}}/>
            </View>
        );
    }
}

//src/widget/TextInputDemo.js
import React, {Component} from 'react';
import {Text, TextInput, View} from 'react-native';

export default class TextInputDemo extends Component {

    constructor(props) {
        super(props);
        this.state = {text: ''};
    }

    render() {
        return (
            <View style={{padding: 10}}>
                <TextInput
                    style={{height: 40}}
                    placeholder="Type here to translate"
                    onChangeText={(text) => this.setState({text})}
                />
                <Text style={{padding:10, fontSize:42}}>
                    {this.state.text.split(' ').map((word) => word&&'