【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.jsimport 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.jsimport 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.jsimport 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.jsimport 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.jsimport 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.jsimport 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>
        );
    }
}

〖坚持的一俢〗