为了账号安全,请及时绑定邮箱和手机立即绑定

【React Native 极速指南】基础篇

2019.05.06 09:47 489浏览

这篇文章你将会学习到:

  • 如何安装 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

// 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

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>
        );
    }
}

〖坚持的一俢〗




点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

0人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 邀请有奖 帮助中心 APP下载
官方微信

举报

0/150
提交
取消