一、Text 文本组件

支持文本和Text组件嵌套、支持样式（不支持弹性布局）、不可在内部直接使用其他组件，只可是文本或者 Text 组件，支持 onPress 点击事件

import React from 'react';
import {Text} from 'react-native';

const App = () => {
  return (
    <Text>
      hello world
      <Text> hello world </Text>
      <Text> hello world </Text>
    </Text>
  );
};

export default App;

二、View 容器组件

支持样式(不支持字体、颜色等属性)、支持 Flexbox 布局，可嵌套，不可在内部直接使用文本，需要把文本放在 Text 组件中

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

const App = () => {
  return (
    <View>
      <Text> hello world </Text>
      <View>
        <Text> hello world </Text>
      </View>
    </View>
  );
};

export default App;

三、 ScrollView 滚动容器组件

必须先确定 ScrollView组件 的父容器的高度，ScrollView 会把所有子元素一次性全部渲染出来，所以不适合列表渲染
支持各节点事件回调、支持滚动到指定位置

import React from 'react';
import {
  Text,
  StyleSheet,
  SafeAreaView,
  ScrollView,
  StatusBar,
} from 'react-native';

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <ScrollView style={styles.scrollView}>
        <Text style={styles.text}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </Text>
      </ScrollView>
    </SafeAreaView>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 0.8,
    paddingTop: StatusBar.currentHeight,
  },
  scrollView: {
    backgroundColor: 'pink',
    marginHorizontal: 20,
    flex: 1,
  },
  text: {
    fontSize: 42,
  },
});
export default App;

四、 FlatList 列表滚动组件（列表渲染）

FlatList 支持行间分隔线，支持多列布局，支持下拉刷新、支持上拉加载、支持跳转到指定行（ScrollToIndex）、支持单独的头部组件、支持单独的尾部组件、无限滚动加载等等。

import React from 'react';
import {
  SafeAreaView,
  View,
  FlatList,
  StyleSheet,
  Text,
  StatusBar,
} from 'react-native';

const DATA = [
  {
    id: '1',
    title: 'item 1',
  },
  {
    id: '2',
    title: 'item 2',
  },
  {
    id: '3',
    title: 'item 3',
  },
  {
    id: '4',
    title: 'item 4',
  },
  {
    id: '5',
    title: 'item 5',
  },
  {
    id: '6',
    title: 'item 6',
  },
  {
    id: '7',
    title: 'item 7',
  },
];

interface IDataItem {
  id: string;
  title: string;
}

const Item = ({title}: {title: string}) => {
  return (
    <View style={styles.item}>
      <Text style={styles.title}>{title}</Text>
    </View>
  );
};

const App = () => {
  const renderItem = ({item}: {item: IDataItem}) => <Item title={item.title} />;

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  item: {
    backgroundColor: '# f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});

export default App;

五、SectionList 分组列表滚动组件

SectionList 支持分组，支持行间分隔线，支持多列布局，支持下拉刷新、支持上拉加载、支持多种数据源结构、支持单独的头部组件、支持单独的尾部组件、无限滚动加载等等。

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  SafeAreaView,
  SectionList,
  StatusBar,
} from 'react-native';

const DATA = [
  {
    title: 'group1',
    data: ['11', '12', '13'],
  },
  {
    title: 'group2',
    data: ['21', '22', '23'],
  },
  {
    title: 'group3',
    data: ['31', '32', '33'],
  },
];

const App = () => (
  <SafeAreaView style={styles.container}>
    <SectionList
      sections={DATA}
      keyExtractor={(item, index) => item + index}
      renderItem={({item}) => (
        <View style={styles.item}>
          <Text style={styles.title}>{item}</Text>
        </View>
      )}
      renderSectionHeader={({section: {title}}) => (
        <Text style={styles.header}>{title}</Text>
      )}
    />
  </SafeAreaView>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: StatusBar.currentHeight,
    marginHorizontal: 16,
  },
  item: {
    backgroundColor: '# f9c2ff',
    padding: 20,
    marginVertical: 8,
  },
  header: {
    fontSize: 32,
    backgroundColor: '# fff',
  },
  title: {
    fontSize: 24,
  },
});

export default App;