准备工作
//进入到想创建的目录下，执行命令
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布局，后面会介绍到，有什么问题欢迎留言哈
