ReactNative 自带的组件

View 和 Text

view 组件相当于 HTML 中的 div 元素，主要是容器组件。view 容器中是不允许有字符串的。

Text 组件相当于 HTML 中的 P 元素，主要是负责展示文本信息的。

具体实例如下：

import { StyleSheet, Text, View } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.textStyle}>设置view容器</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  textStyle: {
    backgroundColor: "#EEE",
    padding: 20,
  },
});

Button

在 React Native 中默认的按钮是不能设置样式的，需要设置样式的话需要我们自己实现自定义按钮。具体实例如下：

import { Button } from "@rneui/base";
import { StyleSheet, View } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <Button
        title={"按钮"}
        onPress={() => console.log("123")}
        style={styles.btnStyle}
      ></Button>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  btnStyle: {
    backgroundColor: "#EEE",
    fontSize: 30,
    fontWeight: "bold",
  },
});

TextInput

在 React Native 中 TextInput 主要是属于表单的输入框，具体实例如下：

export default function App() {
  const [name, setName] = useState<string>("");
  const [age, setAge] = useState<number>(0);

  return (
    <View style={styles.container}>
      <Text>
        用户信息：姓名{name}，年龄:{age}
      </Text>

      <Text>表单输入框</Text>
      <View style={styles.formItem}>
        <Text style={styles.formTitle}>姓名：</Text>
        <TextInput
          style={styles.inputItem}
          onChangeText={(val) => setName(val)}
        />
      </View>
      <View style={styles.formItem}>
        <Text style={styles.formTitle}>年龄：</Text>
        <TextInput
          style={styles.inputItem}
          onChangeText={(val) => setAge(+val)}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
    width: "100%",
    padding: 20,
  },
  formItem: {
    width: "100%",
  },
  formTitle: {
    width: 100,
  },
  inputItem: {
    borderWidth: 3,
    borderColor: "#eee",
    borderRadius: 3,
  },
});

FlatList 和 ScrollView

ScollView 组件是用于列表滚动组件，因为在 React Native 中，列表很长的时候，终端设备并不会自动添加滚动的行为，所以我们需要 ScollView 这类组件来实现滚动行为添加。

FlatList 组件跟 ScrollView 组件一样可以滚动查看长列表的内容，但是 FlatList 并不是一次性展示列表的所有内容，它是通过一定算法展示可见部分数据，从性能上比 ScrollView 要好。

具体实例如下：

import { StyleSheet, View, Text, ScrollView } from "react-native";

type Persion = {
  id: number;
  name: string;
  age: number;
};

export default function App() {
  const persions = [
    { id: 1, name: "张伟", age: 12 },
    { id: 2, name: "王薇", age: 13 },
    { id: 3, name: "李薇", age: 23 },
    { id: 4, name: "那莉", age: 21 },
    { id: 5, name: "强利", age: 11 },
    { id: 6, name: "汪雷", age: 8 },
    { id: 7, name: "王莉", age: 11 },
  ];

  return (
    <View style={styles.container}>
      <ScrollView>
        {persions.map((item: Persion) => {
          return (
            <View style={styles.listBox}>
              <Text style={styles.item}>
                姓名：{item.name} 年龄：{item.age}
              </Text>
            </View>
          );
        })}
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
    width: "100%",
    padding: 20,
  },
  listBox: {
    margin: 30,
  },
  item: {
    padding: 20,
    backgroundColor: "pink",
    fontSize: 20,
    fontWeight: "bold",
  },
});

import { StyleSheet, View, Text, ScrollView, FlatList } from "react-native";

export default function App() {
  const persions = [
    { id: 1, name: "张伟", age: 12 },
    { id: 2, name: "王薇", age: 13 },
    { id: 3, name: "李薇", age: 23 },
    { id: 4, name: "那莉", age: 21 },
    { id: 5, name: "强利", age: 11 },
    { id: 6, name: "汪雷", age: 8 },
    { id: 7, name: "王莉", age: 11 },
  ];

  return (
    <View style={styles.container}>
      <FlatList
        data={persions}
        renderItem={({ item }) => (
          <Text style={styles.item}>
            姓名：{item.name} 年龄：{item.age}
          </Text>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
    width: "100%",
    padding: 20,
  },
  listBox: {},
  item: {
    padding: 20,
    backgroundColor: "pink",
    fontSize: 20,
    fontWeight: "bold",
    margin: 30,
  },
});

Alert

Alert 类似于 HTML 的 aler 弹出框，具体语法如下：

Alert.alert(标题, 显示内容, 按钮区(类型为数组))

TouchableWithoutFeedback 和 Keyboard

TouchableWithoutFeedback 主要是监听空白区的点击事件。

Keyboard 主要是收起和展开软键盘。