React Native学习笔记· 1. 官网入门基础

看了一下，部分内容有点像Taro(Taro借鉴react和rn), 官网推荐使用函数和class这2种方式写，考虑到react 开发团队转向hooks，所以我将都用函数式写。

不过也有几点不太一样：

<TextInput
    style={{height: 40}}
    placeholder="Type here to translate!"
    onChangeText={text => setText(text)}
    defaultValue={text}
/>

有一个长列表概念，FlatList，需要2个属性，data和renderItem，字面意思，data是列表的数据源，而renderItem则从数据源中逐个解析数据，然后返回一个设定好格式的组件来渲染。不过感觉缺少双击回到顶部和下拉刷新等等功能，后续我尝试封装一下。

   <FlatList
        data={[]}
        renderItem={({item}) => <Text>{item}</Text>}
      />

Platform模块。提供了一个检测当前运行平台的模块。
- Platform.OS ，在 iOS 上会返回ios，而在 Android 设备或模拟器上则会返回android。
- Platform.select() , 它可以以 Platform.OS 为 key，从传入的对象中返回对应平台的值。 Platform.select({os: () => require('ComponentIOS'), android: () => require('ComponentAndroid')})
- Platform.Version 在安卓表示 api level， ios表示表示当前系统版本
特定平台扩展名。有点像Taro 在不同平台使用特定文件。React Native 会检测某个文件是否具有.ios.或是.android.的扩展名，然后根据当前运行的平台自动加载正确对应的文件。
Button 点击事件是onPress。
定义样式：const styles = StyleSheet.create({})。
定义宽高3种方式：
1. <View style={{width: 50, height: 50}} /> 无单位指定宽高。
2. <View style={{flex: 1}} /> felx 弹性布局宽高。
3. <View style={{width: '66%', height: '35%', }} /> 百分比方式
布局采用flex的方式 flexBox。
更多核心组件和api。