在开始准备入手React Native时，先了解一下在RN中，页面怎么布局、如何写样式以及手势触摸事件。

React Native 页面布局FlexBox

FlexBox布局也就是将容器内容排行排列，对齐和空白空间的分配。
FlexBox常见的几个属性：

1. display，将容器设置为弹性容器
2. flex-direction，定义主轴，也就弹性容器内容的排列方向，默认是内容在水平方向排列
3. flex-warp，控制弹性子容器是否换行
4. flex-flow，是flex-direction和flex-warp的简写
5. justify-content，定义子容器在主轴方向的上对齐方式，比如常见的两端对齐space-between
6. align-items，定义子容器在侧轴方向上的对齐方式，比如主轴是水平方向，那么侧轴是垂直方向
7. align-content，调整伸缩行在弹性容器里面的对齐方式，如果容器里面只有一行，那么这个属性无效

伸缩容器属性

1. order，定义伸缩元素的排列顺序，数值越小越是靠前，默认是0
2. flex（flex-grow、flex-shrink和flex-basis），指定元素可伸缩长度，由扩展比例属性、收缩比例属性、伸缩基准组成
3. align-self，设置元素在交叉轴上的对齐方式，覆盖了align-items对每一行的对齐方式。

在ReactNative中，FlexBox布局支持属性：

1. flex，指定元素是否使用弹性盒布局，属性值大于0，才可以伸缩
2. flexDirection，指定元素的伸缩方向：row/column
3. alignSelf，单独设置伸缩元素在交叉轴上的对齐方式
4. alignItems，设置伸缩元素在侧轴的对齐方式
5. justifyContent，设置伸缩元素在主轴方向上的对齐方式
6. flexWrap，设置伸缩元素是单行还是多行显示

样式

样式按照作用域来分类：行内样式、内嵌样式和外部样式

行内样式

是直接把css代码写在标签中，直接设置元素的style属性，例如：

		<View
          style={{
            backgroundColor: 'red',
          }}>
        </View>

内嵌样式

是一种对象样式，把样式写在该对象中，例如：

const color = {color:'red'}
<Text style={color}>样式</Text>

外部样式

外部样式是把样式写到一个单独的外部文件中，然后在组件中引入：

import {
  StyleSheet,
} from 'react-native';
const App = () => {
  const isDarkMode = useColorScheme() === 'dark';
  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
        <View
          style={{
            backgroundColor: 'red',
          }}>
        1111111
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};
const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '700',
    marginTop: 20,
    color: 'red',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
    backgroundColor: 'red',
    color: 'blue',
    fontSize: 20,
  },
});

这就是ReactNative中样式写法。