Match的React Native入门之旅

Posted 2022-12-04 张旭童

这是一篇学习笔记，注意事项的文章。
文中的资料绝大部分出自React中文网

一 搭建开发环境

运行

react-native init AwesomeProject
cd AwesomeProject
react-native run-android

三 State（状态）

我们使用两种数据来控制一个组件：props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。 对于需要改变的数据，我们需要使用state。

一般来说，你需要在constructor中初始化state（ES5:getInitialState方法来初始化state），然后在需要修改时调用setState方法。

---

五 样式

只是按照JS的语法要求使用了驼峰命名法，例如将background-color改为backgroundColor。

style属性可以是一个普通的javascript**对象。这是最简单的用法，因而在示例代码中很常见。你还可以传入一个数组——在数组中位置居后的样式对象比居前的优先级更高**，这样你可以间接实现样式的继承。

实际开发中组件的样式会越来越复杂，我们建议使用StyleSheet.create来集中定义组件的样式。

class LotsOfStyles extends Component 
  render() 
    return (
      <View>
        <Text style=styles.red>just red</Text>
        <Text style=styles.bigblue>just bigblue</Text>
        <Text style=[styles.bigblue, styles.red]>bigblue, then red</Text>
        <Text style=[styles.red, styles.bigblue]>red, then bigblue</Text>
        <Text style=[styles.bigblue,color:'black'] > display</Text>
      </View>
    );
  


const styles = StyleSheet.create(
  bigblue:
    color:'blue',
    fontWeight:'bold',
    fontSize:30,
    color:'red',
  
);

六 高度与宽度

指定宽高

在样式中指定固定的width和height。React Native中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。(dp)

        <View style=width: 50, height: 50, backgroundColor: 'powderblue' />

弹性宽高（Flex）

在组件样式中使用flex可以使其在可利用的空间中动态地扩张或收缩。一般而言我们会使用flex:1来指定某个组件扩张以撑满所有剩余的空间。

组件能够撑满剩余空间的前提是其父容器的尺寸不为零。如果父容器既没有固定的width和height，也没有设定flex，则父容器的尺寸为零。其子组件如果使用了flex，也是无法显示的。

此时子控件除非强制制定width height 才能显示

// 试试去掉父View中的`flex: 1`。
      // 则父View不再具有尺寸，因此子组件也无法再撑开。
      // 然后再用`height: 300`来代替父View的`flex: 1`试试看？
      <View style=flex: 1>
        <View style=flex: 1, backgroundColor: 'powderblue' />
        <View style=flex: 2, backgroundColor: 'skyblue' />
        <View style=flex: 3, backgroundColor: 'steelblue' />
      </View>

七 使用Flexbox布局

flexDirection(方向) justifyContent（主轴分布方式） alignItems（次轴分布方式)
使用flexbox规则来指定某个组件的子元素的布局。

一般来说，使用flexDirection、alignItems和 justifyContent三个样式属性就已经能满足大多数布局需求。译

React Native中的Flexbox的工作原理和web上的CSS基本一致，当然也存在少许差异。首先是默认值不同：flexDirection的默认值是column而不是row，而flex也只能指定一个数字值。

Flex Direction

在组件的style中指定flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列呢？默认值是竖直轴(column)方向。

// 尝试把`flexDirection`改为`column`看看
      <View style=flex: 1, flexDirection: 'row'>
        <View style=width: 50, height: 50, backgroundColor: 'powderblue' />
        <View style=width: 50, height: 50, backgroundColor: 'skyblue' />
        <View style=width: 50, height: 50, backgroundColor: 'steelblue' />
      </View>

Justify Content(主轴)

在组件的style中指定justifyContent可以决定其子元素沿着主轴的排列方式。子元素是应该靠近主轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end、space-around以及space-between。

和Android新出的ConstraintLayout很相似是不是，因为ConstraintLayout就是模仿flexible 布局的产物

/ 尝试把`justifyContent`改为`center`看看
      // 尝试把`flexDirection`改为`row`看看
      <View style=
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-between',
      >
        <View style=width: 50, height: 50, backgroundColor: 'powderblue' />
        <View style=width: 50, height: 50, backgroundColor: 'skyblue' />
        <View style=width: 50, height: 50, backgroundColor: 'steelblue' />
      </View>

Align Items（次轴）

在组件的style中指定alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end以及stretch。

可参考[布局样式属性]:http://reactnative.cn/docs/0.44/layout-props.html

八 处理文本输入

TextInput是一个允许用户输入文本的基础组件。
它有一个名为onChangeText的属性，此属性接受一个函数，而此函数会在文本变化时被调用。
另外还有一个名为onSubmitEditing的属性，会在文本被提交后（用户按下软键盘上的提交键）调用。

“`
class PizzaTranslator extends Component
constructor(props)
super(props);
this.state = text: ”;

render()
return (