react-native入门(二)----建立一个应用和组件

准备工做

//进入到想建立的目录下，执行命令
react-native init Together
复制代码

建立完毕以后使用编译器打开Together目录(webStrom或者vcCode都行），里面入口文件为index.js，实际UI代理在App.js中，我用的webStorm查看的还行

声明一个常量或者变量

后面介绍UI组件基本结构会介绍

let a = 10
var a = 10 //实际使用并没有区别
复制代码

声明一个方法

//里面的this指向调用他的组件，实际使用中不推荐，网络请求和UI组件不要紧的可使用
test1 () {
    this.test2() //此时的this不是当前组件，若是想继续调用当前组件其余方法，使用后面的声明方式
}
//推荐使用，里面的this会指向当前控制器组件自己，实际使用中推荐
test2  = ()=> {
    this.test1()
}
//和下面同样，异步执行一个方法，能够理解为加入一个任务到异步队列中并执行
async test3 () {
    let result = await request.fetch(params) //执行一个网络请求同步执行，阻塞当前线程直到请求完毕
    console.log(result)
}
同上，this指向当前控制器组件自己
async test4 = ()=> {
    
}
复制代码

建立一个UI组件

目录在page下，page与app.js并集（若想在app.js中引用 import Student1 from "./page/Student1"）

有些编译器可能会默认建立，没有的能够按照下面的来

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

export defalut class Student1 extends Component {
    //构造方法
    constructor (props) {
        super(props)
        let a = {'key1': 1, 'key2': 2}
        //状态机state，只有在里面的变量才会渲染到UI上面
        this.state = {
            ...a, //展开集合
            text: name,
            text2: ''
        }
    }
    
    //UI渲染树
    render () {
        let text3 = this.state.text3 //这里能够建立临时变量，若是对象复杂须要的话
        return (
        <View>
            <Text style={styles.orderNumStyle}>个人名字叫{this.state.text}</Text>
            <TouchableOpacity 
                style={{color: 'red'}}
                onPress={()=>{
                    //点击事件，还能够这么快捷写哈,view是没有text和点击功能的
                    //注意提取和不提取的样式哪里不一样呀
                }}>
                <Text>个人名字叫{this.state.text2}</Text>
            </TouchableOpacity> 
            
            {
                test3 ?
                <Text style={styles.orderNumStyle}>个人名字叫{test3}</Text> : null
            }
            
            {
                this.renderTestItem()//获取外面建立的UI
            }
            
        </View>
        )
    }
    
    renderTestItem = ()=> {
        return (
        <View>
            <Text style={styles.orderNumStyle}>个人名字叫{this.state.text}</Text>
        </View>
        )
    }
    
    //UI组件初次渲染完毕后的回调，类似于ios的ViewDidLoad,能够在这里开始网络请求了
    componentDidMount () {
        this.requestUserInfo()
    }
    
    //这里面全部声明的方法均为public
    async requestUseInfo = ()=> {
        //let result = await request.fetch(param)
        //若是想更新UI树上的组件，必需要使用setState方法来更新text才能够更新UI，更新后，UI树会自动根据状态机的内容，进行内容替换并渲染，此过程为异步
        this.setState({
            text: "123123123"
        })
        //注意: this.state.text不会渲染UI树， //this.setState({})执行后也不会立刻把state里面的内容赋值
    }

}

//UI的控件样式,下面多弄点样式
const styles = StyleSheet.create({
        orderNumStyle: {
            color: '#9D9EA3FF',
            fontSize: px2dp(24),
        },
        btnTextStyle: {
            color: '#016BFF',
        },
        btnBorderStyle: {
            borderRadius: px2dp(3),
            borderWidth: px2dp(2),
            borderColor: '#016BFF',
            backgroundColor: '#E8F2FF',
            height: px2dp(50),
            alignItems: 'center',
            justifyContent: 'center',
            paddingHorizontal: px2dp(14),
        },
    })
复制代码

能够尝试运行下项目哈，控制台输入：react-native run-ios 或者使用xcode或者androidstudio打开尝试

注：上面的项目运行不成功，运行默认的哈，上面的仅仅是语法参考

上面的组件是我纯打出来的小功能，有点小问题能够提示下更正哈,能够经过这种大括号的方式来动态调整UI的显隐（test3的示例），注：里面有很多细节哈~,

直接复制过去可能会不成功哈，小知识点要记住哈

结尾：

项目中用到的UI布局大多数是flexBox布局，后面会介绍到，有什么问题欢迎留言哈