【React Native 极速指南】基础篇

这篇文章你将会学习到：

• 如何安装 React Native
• ABC
  • Hello World
  • 属性 Props
  • 状态 State
  • 样式 Style
  • 弹性布局 Flex
  • 事件处理 Text Input
  • 组件 ScrollView
  • 组件 FlatList and SectionList
  • 网络 Network

如何安装 React Native

• 开发环境请参考 《【React Native 极速指南】开发环境》
• brew install node
• brew install watchman
• npm install -g react-native-cli
• react-native init ReactNativeTuroral
• cd ReactNativeTuroral
• react-native run-ios --port 8089 Or react-native run-android --port 8089

ABC

Hello World

// hello-world.js
import React, { Component } from 'react';
import { Text, View } from 'react-native';

const styles = {
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    }
};

export default class HelloWorld extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text>
                    Hello World!
                </Text>
            </View>
        );
    }
}

属性 Props

• 组件的属性
• <Com name={'abc'}></Com>

// my-component.js
import React, { Component } from 'react';
import { Text } from 'react-native';

export default class MyComponent extends Component {

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

// hello-world.js
//...
import MyComponent from './my-component';

//...

export default class HelloWorld extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text>
                    Hello World!
                </Text>
                <MyComponent text="My Component"></MyComponent>
            </View>
        );
    }
}

状态 State

• 必须使用 setState() 改变状态;
• 当 setState(), UI 将重新绘制
• setState() 是异步的

// my-state.js
import React, { Component } from 'react';
import { Text, View } from 'react-native';

export default class MyState extends Component {

    state = {
        message: '',
    };

    componentDidMount() {
        setTimeout(() => {
            this.setState({
                message: 'Hello State!'
            });
        }, 1000)
    }

    render() {
        return (
            <View>
                <Text>
                    {this.state.message}
                </Text>
            </View>
        );
    }
}

样式 Style

• 采用驼峰 CSS: { backgroundColor: '#fff' };
• 使用 StyleSheet.create: const styles = StyleSheet.create({...});
• 多个样式用数组: style={[style1, style2]};

弹性布局 Flex

• flexDirection: 'column'
• justifyContent:
• alignItems:
• 请参考

事件处理 Text Input

• 引入 TextInput 组件
• onChangeText 事件
• setState

// my-input.js
import React, { Component } from 'react';
import { Text, View, TextInput } from 'react-native';

export default class MyInput extends Component {

    state = {
        text: '',
    };

    render() {
        return (
            <View>
                <TextInput onChangeText={(text) => this.setState({ text })}></TextInput>
                <Text>{this.state.text}</Text>
            </View>
        );
    }
}

组件 ScrollView

• 引入 ScrollView 组件;
• 通过设置 horizontal 属性，来支持横向和纵向滚动;

// my-scroll.js
import React, { Component } from 'react';
import { Text, ScrollView } from 'react-native';

export default class MyScroll extends Component {

    render() {
        return (
            <ScrollView>
                <Text style={{ fontSize: 96 }}>Large Word</Text>
                <Text style={{ fontSize: 96 }}>Big World</Text>
                <Text style={{ fontSize: 96 }}>Great World</Text>
            </ScrollView>
        );
    }
}

组件 FlatList and SectionList

• 引入 FlatList 组件;
• 设置 data;
• 设置 renderItem;
• 参考
• SectionList 参考

// my-flat-list.js
import React, { Component } from 'react';
import { FlatList, StyleSheet, Text } from 'react-native';

export default class MyFlatList extends Component {
    render() {
        return (
            <FlatList
                data={[
                    { key: 'Devin' },
                    { key: 'Jackson' },
                    { key: 'James' },
                    { key: 'Joel' },
                    { key: 'John' },
                    { key: 'Jillian' },
                    { key: 'Jimmy' },
                    { key: 'Julie' },
                ]}
                renderItem={({ item }) => <Text>{item.key}</Text>}
            />
        );
    }
}

网络 Network

• 使用内置 fatch 组件: http://facebook.github.io/react-native/docs/network
• 或者 npm axios 组件

import React, { Component } from 'react';
import { Text, View } from 'react-native';

export default class MyNetwork extends Component {

    state = {
        data: ''
    };

    async componentDidMount() {
        const res = await fetch('http://ec2-54-222-217-237.cn-north-1.compute.amazonaws.com.cn:12800/api/v0/cat/Qmaj8UWNjTzBMBHkkaqSiyax2nFgiwYP2ewxnhGBucn6S8')
        const json = await res.json();
        console.log(json);
        this.setState({data: json})
    }

    render() {
        return (
            <View>
                <Text></Text>
            </View>
        );
    }
}

〖坚持的一俢〗