React-Native基础知识-JXin的博客

温馨提示

该文章距离上次更新已经过去了 539 天，文章内容可能已经过时。

样式
图片
文本输入
按钮
- TouchableHighlight
滚动视图
长列表
- FlatList
- SectionList

样式

StyleSheet文档

在 RN 中提供一个 StyleSheet.create 方法来集中定义组件的样式，例如：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

1
2
3
4
5
6
7
8

需要注意的是，书写方式要按照 驼峰命名法，例如 background-color 需要写成 backgroundColor

所有组件都有一个 style 属性，用来书写 CSS 样式

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.red}>Open up App.js to start working on your app!!!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  red: {
    color: 'red'
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

如果有多个样式，可以传入一个数组，例如：

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={[styles.red, styles.blue]}>Open up App.js to start working on your app!!!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  red: {
    color: 'red',
  },
  blue: {
    color: 'blue'
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

在数组中，后面的优先级会比前面的更高

注意

在 RN 中无法缩写样式，例如 border: 1px solid 是无法使用的，需要拆开写成 borderWidth: 1 和 borderStyle: ‘solid’
在设置样式时，如果涉及到尺寸，默认都是不给单位的，表示的是与设备像素密度无关的逻辑像素点，具体可以看看这篇文章设备的尺寸和像素

图片

Image文档

在 RN 中提供一个 Image 组件来显示图片，例如：

引入一个本地图片：本地图片使用 require 来引入

import { View, Image } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <Image source={require('../assets/adaptive-icon.png')} />
    </View>
  );
}

1
2
3
4
5
6
7
8
9

引入一个网络图片：网络图片使用 uri 来引入

import { View, Image } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <Image
        source={{ uri: "https://www.sjxlife.com/_nuxt/img/logo.93a372f.png" }}
        style={{ width: 100, height: 100 }}
      />
    </View>
  );
}

1
2
3
4
5
6
7
8
9
10
11
12

注意

如果是本地图片，会自动包含图片的，而网络或者base64数据的图片，则需要手动指定尺寸，否则会不显示

文本输入

TextInput文档

在 RN 中提供一个 TextInput 组件，用于文本输入，其中有一个 onChangeText 属性，在文本发生变化时调用，例如：

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

export default function App() {
  const [name, setName] = useState(name);
  return (
    <View style={styles.container}>
      <TextInput
        defaultValue={name}
        onChangeText={(text) => setName(text)}
        placeholder="文本输入框"
        style={styles.inputStyle}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  inputStyle: {
    borderWidth: 1,
    borderStyle: "solid",
    borderColor: "gray",
    width: 200,
    height: 40,
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

按钮

Button文档

在 RN 中，使用 Button 组件来显示按钮

Button 有两个必须的属性，onPress 和 title，分别是点击后的事件，和按钮内的文本信息，例如：

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

export default function App() {
  const onclick = () => {
    console.log("点击了按钮");
  };
  return (
    <View style={styles.container}>
      <Button onPress={onclick} title="按钮" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Button 组件由于调用的是原生的方法，是无法修改样式的，且在 ios 和安卓中显示的样式是不一样的，如果想让按钮的样式一样，可以使用 TouchableHighlight

TouchableHighlight

TouchableHighlight文档

TouchableHighlight 可以自定义按钮的样式，同样也提供了 onPress 属性

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

export default function App() {
  const onclick = () => {
    console.log("点击了按钮");
  };
  return (
    <View style={styles.container}>
      <TouchableHighlight
        onPress={onclick}
        style={{
          borderWidth: 1,
          borderColor: "red",
          width: 200,
          height: 40,
        }}
      >
        <Text style={{ color: "red", textAlign: "center", lineHeight: 40 }}>
          按钮
        </Text>
      </TouchableHighlight>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

滚动视图

scrollview文档

在 RN 中，可以使用 ScrollView 组件来滚动视图，例如：

import { ScrollView, Image } from "react-native";

export default function App() {
  return (
    <ScrollView>
      <Image source={require("./assets/adaptive-icon.png")} />
      <Image source={require("./assets/adaptive-icon.png")} />
      <Image source={require("./assets/adaptive-icon.png")} />
    </ScrollView>
  );
}

1
2
3
4
5
6
7
8
9
10
11

ScrollView 是一个通用的可滚动的容器，可以在其中放多个不同类型的组件和视图，且 ScrollView 不仅可以垂直滚动，还能使用 horizontal 属性进行水平滚动

长列表

在 RN 在还提供了两个长列表组件：

FlatList
SectionList

FlatList

FlatList文档

FlatList 也能进行视图滚动，但是和 ScrollView 不同的是，FlatList 并不会立即渲染所有元素，而是优先渲染屏幕上可见的元素

FlatList 必须有二个属性，data 和 renderItem，data 表示列表的数据源，renderItem 则是让列表按照一个设定好的格式展示，下面是一个例子：

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

export default function App() {
  const data = [];
  for (let i = 0; i < 50; i++) {
    data.push({
      name: "JXin" + i,
    });
  }
  return (
    <FlatList data={data} keyExtractor={(item) => item.name} renderItem={({ item }) => <Text>{item.name}</Text>} />
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

React-Native FlatList

提示

keyExtractor 这个属性的作用是给每个元素设置一个不重复的 key，以便在刷新时能够确定其变化的位置，减少重新渲染的开销。

SectionList

SectionList文档

SectionList 在 FlatList 的基础上增加了一个标题，例如：

import {
  Text,
  SectionList
} from "react-native";

export default function App() {
  const data = [];
  for (let i = 0; i < 50; i++) {
    const arr = []
    for (let j = 0; j < 50; j++) {
      arr.push({
        name: "JXin" + j,
      });
    }
    data.push({
      title: '标题' + i,
      data: arr
    })
  }
  return (
    <SectionList
      sections={data}
      keyExtractor={(item) => item.name}
      renderItem={({ item }) => <Text>{item.name}</Text>}
      renderSectionHeader={({ section }) => <Text>{section.title}</Text>}
    />
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

React-Native SectionList