React Native 备忘清单

NPM version
Downloads
Repo Dependents
Github repo

适合初学者的综合 React Native 备忘清单，在开始 React Native 之前需要先掌握 react 库

入门

macOS 安装 iOS 环境

您将需要 Node、Watchman、React Native 命令行界面、Ruby 版本管理器、Xcode 和 CocoaPods

1
2
$ brew install node # Node 14 或更新版本
$ brew install watchman

使用 .ruby-version 文件来确保您的 Ruby 版本与所需的一致

1
2
$ ruby --version
# ruby 2.7.5

注意: macOS 12.5.1 附带了 Ruby 2.6.8，这不是 React Native 所要求的，React Native 70+ 需要 Ruby 2.7.5，可以使用下面工具切换版本：

创建一个新的应用程序

1
2
3
4
5
6
7
$ npx react-native init MyApp
# 指定 React Native 版本创建
$ npx react-native init MyApp \
  --version X.XX.X
# 创建 typescript 版本项目
$ npx react-native init MyTSApp \
--template react-native-template-typescript

安装依赖

1
2
3
4
$ yarn install # 根目录运行
$ cd ios # 进入 ios 目录
$ bundle install # 安装 Bundler
$ bundle exec pod install # 以安装 iOS 依赖项

运行你的 React Native 应用程序

1
2
3
4
5
6
# 启动监听打包 JS 服务，默认端口 8081
$ npx react-native start
# 指定 8088 端口
$ npx react-native start --port=8088
# 启动 iOS 模拟器运行你的应用
$ npx react-native run-ios
:- –
⇧ + ⌘ + 2 设备窗格
⌘ + R 构建并运行
摇动您的设备 打开开发者菜单

macOS 安装 Android 环境

您将需要 Node、Watchman、React Native 命令行界面、JDK 和 Android Studio

1
2
$ brew install node # Node 14 或更新版本
$ brew install watchman

我们建议使用 Homebrew 安装名为 Azul Zulu 的 OpenJDK 发行版，发行版为 Intel 和 M1 Mac 提供 JDK

1
2
$ brew tap homebrew/cask-versions
$ brew install --cask zulu11

下载安装 Android Studio

  • Android SDK
  • Android SDK Platform
  • Android Virtual Device

安装安卓SDK，React Native 应用需要 Android 12 (S) SDK，通过 Android Studio 中的 SDK 管理器安装其他 Android SDK

SDK 管理器也可以在 Android Studio “Preferences” 对话框中找到，位于 Appearance & Behavior → System Settings → Android SDK

  • Android SDK Platform 31
  • Intel x86 Atom_64 System Image 或 Google APIs Intel x86 Atom System Image 或 (for Apple M1 Silicon) Google APIs ARM 64 v8a System Image

接下来，选择 SDK Tools 选项卡并选中 Show Package Details 旁边的复选框。 查找并展开 Android SDK Build-Tools 条目，然后确保选择了 31.0.0。最后点击 Apply 下载并安装 Android SDK 及相关构建工具

配置 ANDROID_SDK_ROOT 环境变量

将以下行添加到您的 $HOME/.bash_profile 或 $HOME/.bashrc（如果您使用的是 zsh，则为 ~/.zprofile 或 ~/.zshrc）配置文件：

1
2
3
export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_SDK_ROOT/emulator
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools

创建一个新的应用程序

1
2
3
4
5
$ npx react-native init MyApp
# 指定 React Native 版本创建
$ npx react-native init MyApp --version X.XX.X
# 创建 typescript 版本项目
$ npx react-native init MyTSApp --template react-native-template-typescript

安装依赖

1
$ yarn install # 根目录运行

使用虚拟设备

  • 使用 Android Studio 打开 ./AwesomeProject/android
  • 从 Android Studio 中打开 AVD 管理器 来查看可用的 Android 虚拟设备 (AVD) 列表
  • 第一次，您可能需要创建一个新的 AVD。选择 **Create Virtual Device…**，然后从列表中选择任何电话并单击“下一步”，然后选择 S API Level 31 image。

运行你的 React Native 应用程序

1
2
3
4
# 启动监听打包 JS 服务
$ npx react-native start
# 启动 iOS 模拟器运行你的应用
$ npx react-native run-ios

打开 React Native Debug 菜单

:- –
⌘ + M(Android) 打开开发者菜单
⌘ + D(iOS) 打开开发者菜单
Ctrl + D(Linux) 打开开发者菜单
摇动您的设备 打开开发者菜单
按两次 R 键 构建并运行

基本组件

View

1
2
3
4
5
6
7
8
9
10
11
12
13
import React from "react";
import { View, Text } from "react-native";

export default function ViewExample() {
  return (
    <View
      style={{
        backgroundColor: "red",
        flex: 0.5
      }}
    />
  );
};

构建 UI 的最基本组件

Text

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React from 'react';
import { Text } from 'react-native';
import { StyleSheet } from 'react-native';

export default function BoldBeautiful() {
  return (
    <Text style={styles.baseText}>
      我是粗体
      <Text style={styles.innerText}>
        和红色
      </Text>
    </Text>
  );
};
const styles = StyleSheet.create({
  baseText: { fontWeight: 'bold' },
  innerText: { color: 'red' }
});

用于显示文本的组件

TextInput

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React from "react";
import { SafeAreaView, StyleSheet, TextInput } from "react-native";

export default function UseTextInput() {
  const [
    text, onChangeText
  ] = React.useState("Useless Text");
  return (
    <SafeAreaView>
      <TextInput
        onChangeText={onChangeText}
        value={text}
      />
    </SafeAreaView>
  );
};

用于通过键盘将文本输入应用程序的组件

Image

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
import React from 'react';
import { View, Image, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: { paddingTop: 50, },
  tinyLogo: { width: 50, height: 50, },
  logo: { width: 66, height: 58, },
});

const DisplayAnImage = () => {
  return (
    <View style={styles.container}>
      <Image
        style={styles.tinyLogo}
        source={require('@expo/snack-static/react-native-logo.png')}
      />
      <Image
        style={styles.tinyLogo}
        source={{
          uri: 'https://reactnative.dev/img/tiny_logo.png',
        }}
      />
      <Image
        style={styles.logo}
        source={{
          uri: 'data:image/png;base64,iVBORw0K.....',
        }}
      />
    </View>
  );
}

export default DisplayAnImage;

用于显示图像的组件

ScrollView

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
import React from 'react';
import { StyleSheet, Text, SafeAreaView, ScrollView, StatusBar } from 'react-native';

export 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: 1,
    paddingTop: StatusBar.currentHeight,
  },
  scrollView: {
    backgroundColor: 'pink',
    marginHorizontal: 20,
  },
  text: {
    fontSize: 42,
  },
});

提供一个可以承载多个组件和视图的滚动容器

StyleSheet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React from "react";
import { StyleSheet, Text, View } from "react-native";

export const App = () => (
  <View style={styles.container}>
    <Text style={styles.title}>
      React Native
    </Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    padding: 24,
    backgroundColor: "#eaeaea"
  },
  title: {
    backgroundColor: "#61dafb",
    color: "#20232a",
    textAlign: "center",
  }
});

提供类似于 CSS 样式表的抽象层

用户界面

Button

1
2
3
4
5
6
7
8
import { Button } from "react-native";

<Button
  onPress={onPressLearnMore}
  title="Learn More"
  color="#841584"
  accessibilityLabel="了解紫色按钮的更多信息"
/>

一个基本的按钮组件，用于处理应该在任何平台上都能很好地呈现的触摸

Switch

1
2
3
4
5
6
7
8
9
import { Switch } from "react-native";

<Switch
  trackColor={{ false: "#767577", true: "#81b0ff" }}
  thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
  ios_backgroundColor="#3e3e3e"
  onValueChange={toggleSwitch}
  value={isEnabled}
/>

呈现布尔输入

列表视图

SectionList

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
import React from "react";
import {
  StyleSheet, Text, View, SafeAreaView, SectionList, StatusBar
} from "react-native";

const DATA = [
  {
    title: "Main dishes",
    data: ["Pizza", "Burger", "Risotto"]
  },
  {
    title: "Sides",
    data: ["French Fries", "Onion Rings", "Fried Shrimps"]
  },
  {
    title: "Drinks",
    data: ["Water", "Coke", "Beer"]
  },
  {
    title: "Desserts",
    data: ["Cheese Cake", "Ice Cream"]
  }
];

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

const App = () => (
  <SafeAreaView style={styles.container}>
    <SectionList
      sections={DATA}
      keyExtractor={(item, index) => item + index}
      renderItem={({ item }) => <Item title={item} />}
      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;

FlatList

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
import React from 'react';
import {
  SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar
} from 'react-native';

const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
];

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

const App = () => {
  const renderItem = ({ item }) => (
    <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;

Android 组件和 API

BackHandler

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
39
40
41
42
43
44
45
46
47
import React, { useEffect } from "react";
import {
  Text, View, StyleSheet, BackHandler, Alert
} from "react-native";

const App = () => {
  useEffect(() => {
    const backAction = () => {
      Alert.alert("Hold on!", "你确定要回去吗？", [
        {
          text: "Cancel",
          onPress: () => null,
          style: "cancel"
        },
        { text: "YES", onPress: () => BackHandler.exitApp() }
      ]);
      return true;
    };

    const backHandler = BackHandler.addEventListener(
      "hardwareBackPress",
      backAction
    );

    return () => backHandler.remove();
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.text}>点击后退按钮！</Text>
    </View>
  );
};

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

export default App;

检测硬件按钮按下以进行后退导航

DrawerLayoutAndroid

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
import React, { useRef, useState } from "react";
import {
  Button, DrawerLayoutAndroid, Text, StyleSheet, View
} from "react-native";

const App = () => {
  const drawer = useRef(null);
  const [drawerPosition, setDrawerPosition] = useState("left");
  const changeDrawerPosition = () => {
    if (drawerPosition === "left") {
      setDrawerPosition("right");
    } else {
      setDrawerPosition("left");
    }
  };

  const navigationView = () => (
    <View style={[styles.container, styles.navigationContainer]}>
      <Text style={styles.paragraph}>I'm in the Drawer!</Text>
      <Button
        title="Close drawer"
        onPress={() => drawer.current.closeDrawer()}
      />
    </View>
  );

  return (
    <DrawerLayoutAndroid
      ref={drawer}
      drawerWidth={300}
      drawerPosition={drawerPosition}
      renderNavigationView={navigationView}
    >
      <View style={styles.container}>
        <Text style={styles.paragraph}>
          Drawer on the {drawerPosition}!
        </Text>
        <Button
          title="Change Drawer Position"
          onPress={() => changeDrawerPosition()}
        />
        <Text style={styles.paragraph}>
          Swipe from the side or press button below to see it!
        </Text>
        <Button
          title="Open drawer"
          onPress={() => drawer.current.openDrawer()}
        />
      </View>
    </DrawerLayoutAndroid>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    padding: 16
  },
  navigationContainer: {
    backgroundColor: "#ecf0f1"
  },
  paragraph: {
    padding: 16,
    fontSize: 15,
    textAlign: "center"
  }
});

export default App;

在 Android 上呈现 DrawerLayout

PermissionsAndroid

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import React from "react";
import {
  Button, PermissionsAndroid,
  SafeAreaView, StatusBar, StyleSheet, Text, View
} from "react-native";

const requestCameraPermission = async () => {
  try {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.CAMERA,
      {
        title: "Cool Photo App Camera Permission",
        message:
          "Cool Photo App needs access to your camera " +
          "so you can take awesome pictures.",
        buttonNeutral: "Ask Me Later",
        buttonNegative: "Cancel",
        buttonPositive: "OK"
      }
    );
    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
      console.log("You can use the camera");
    } else {
      console.log("Camera permission denied");
    }
  } catch (err) {
    console.warn(err);
  }
};

const App = () => (
  <View style={styles.container}>
    <Text style={styles.item}>Try permissions</Text>
    <Button
      title="request permissions"
      onPress={requestCameraPermission}
    />
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingTop: StatusBar.currentHeight,
    backgroundColor: "#ecf0f1",
    padding: 8
  },
  item: {
    margin: 24,
    fontSize: 18,
    fontWeight: "bold",
    textAlign: "center"
  }
});

export default App;

提供对 Android M 中引入的权限模型的访问

ToastAndroid

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
import React from "react";
import {
  View, StyleSheet, ToastAndroid, Button, StatusBar
} from "react-native";

const App = () => {
  const showToast = () => {
    ToastAndroid.show("一只皮卡丘出现在附近!", ToastAndroid.SHORT);
  };

  const showToastWithGravity = () => {
    ToastAndroid.showWithGravity(
      "All Your Base Are Belong To Us",
      ToastAndroid.SHORT,
      ToastAndroid.CENTER
    );
  };

  const showToastWithGravityAndOffset = () => {
    ToastAndroid.showWithGravityAndOffset(
      "A wild toast appeared!",
      ToastAndroid.LONG,
      ToastAndroid.BOTTOM,
      25,
      50
    );
  };

  return (
    <View style={styles.container}>
      <Button title="Toggle Toast" onPress={() => showToast()} />
      <Button
        title="Toggle Toast With Gravity"
        onPress={() => showToastWithGravity()}
      />
      <Button
        title="Toggle Toast With Gravity & Offset"
        onPress={() => showToastWithGravityAndOffset()}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingTop: StatusBar.currentHeight,
    backgroundColor: "#888888",
    padding: 8
  }
});

export default App;

创建 Android Toast 警报

iOS 组件和 API

ActionSheetIOS

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
39
40
41
42
43
44
45
import React, { useState } from "react";
import { ActionSheetIOS, Button, StyleSheet, Text, View } from "react-native";

const App = () => {
  const [result, setResult] = useState("🔮");

  const onPress = () =>
    ActionSheetIOS.showActionSheetWithOptions(
      {
        options: ["Cancel", "Generate number", "Reset"],
        destructiveButtonIndex: 2,
        cancelButtonIndex: 0,
        userInterfaceStyle: 'dark'
      },
      buttonIndex => {
        if (buttonIndex === 0) {
          // cancel action
        } else if (buttonIndex === 1) {
          setResult(Math.floor(Math.random() * 100) + 1);
        } else if (buttonIndex === 2) {
          setResult("🔮");
        }
      }
    );

  return (
    <View style={styles.container}>
      <Text style={styles.result}>{result}</Text>
      <Button onPress={onPress} title="Show Action Sheet" />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center"
  },
  result: {
    fontSize: 64,
    textAlign: "center"
  }
});

export default App;

其它

ActivityIndicator

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
import React from "react";
import {
  ActivityIndicator, StyleSheet, Text, View
} from "react-native";

const App = () => (
  <View style={[styles.container, styles.horizontal]}>
    <ActivityIndicator />
    <ActivityIndicator size="large" />
    <ActivityIndicator size="small" color="#0000ff" />
    <ActivityIndicator size="large" color="#00ff00" />
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center"
  },
  horizontal: {
    flexDirection: "row",
    justifyContent: "space-around",
    padding: 10
  }
});

export default App;

显示圆形加载指示器

Alert

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
import React, { useState } from "react";
import { View, StyleSheet, Button, Alert } from "react-native";

const App = () => {
  const createTwoButtonAlert = () =>
    Alert.alert( "Alert Title", "My Alert Msg",
      [
        {
          text: "Cancel",
          onPress: () => console.log("Cancel Pressed"),
          style: "cancel"
        },
        { text: "OK", onPress: () => console.log("OK Pressed") }
      ]
    );

  return (
    <View style={styles.container}>
      <Button title={"2-Button Alert"}
        onPress={createTwoButtonAlert} />
    </View>
  );
}

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

export default App;

启动具有指定标题和消息的警报对话框

Animated

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
import React, { useRef } from "react";
import {
  Animated, Text, View, StyleSheet, Button, SafeAreaView
} from "react-native";

const App = () => {
  // fadeAnim 将用作不透明度的值。 初始值：0
  const fadeAnim = useRef(new Animated.Value(0)).current;
  const fadeIn = () => {
    // 将在 5 秒内将 fadeAnim 值更改为 1
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 5000
    }).start();
  };
  const fadeOut = () => {
    // 将在 3 秒内将 fadeAnim 值更改为 0
    Animated.timing(fadeAnim, {
      toValue: 0,
      duration: 3000
    }).start();
  };
  return (
    <SafeAreaView style={styles.container}>
      <Animated.View
        style={[
          styles.fadingContainer,
          {
            // 将不透明度绑定到动画值
            opacity: fadeAnim
          }
        ]}
      >
        <Text style={styles.fadingText}>Fading View!</Text>
      </Animated.View>
      <View style={styles.buttonRow}>
        <Button title="淡入淡出" onPress={fadeIn} />
        <Button title="淡出视图" onPress={fadeOut} />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  fadingContainer: {
    padding: 20,
    backgroundColor: "powderblue"
  },
  fadingText: { fontSize: 28 },
  buttonRow: {
    flexBasis: 100,
    justifyContent: "space-evenly",
    marginVertical: 16
  }
});

export default App;

一个用于创建易于构建和维护的流畅、强大的动画的库

Dimensions

1
2
3
4
import { Dimensions } from 'react-native';

const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

提供获取设备尺寸的接口

KeyboardAvoidingView

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
39
40
41
42
43
44
45
46
47
import React from 'react';
import {
  View, KeyboardAvoidingView, TextInput,
  StyleSheet, Text, Platform,
  TouchableWithoutFeedback, Button, Keyboard
} from 'react-native';

const KeyboardAvoidingComponent = () => {
  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === "ios" ? "padding" : "height"}
      style={styles.container}
    >
      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
        <View style={styles.inner}>
          <Text style={styles.header}>Header</Text>
          <TextInput placeholder="用户名" style={styles.textInput} />
          <View style={styles.btnContainer}>
            <Button title="Submit" onPress={() => null} />
          </View>
        </View>
      </TouchableWithoutFeedback>
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1 },
  inner: {
    padding: 24,
    flex: 1,
    justifyContent: "space-around"
  },
  header: { fontSize: 36, marginBottom: 48 },
  textInput: {
    height: 40,
    borderColor: "#000000",
    borderBottomWidth: 1,
    marginBottom: 36
  },
  btnContainer: {
    backgroundColor: "white",
    marginTop: 12
  }
});

export default KeyboardAvoidingComponent;

提供一个自动移出虚拟键盘的视图

Linking

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
39
40
41
42
import React, { useCallback } from "react";
import {
  Alert, Button, Linking, StyleSheet, View
} from "react-native";

const supportedURL = "https://google.com";
const unsupportedURL = "slack://open?team=123456";
const OpenURLButton = ({ url, children }) => {
  const handlePress = useCallback(async () => {
    // 检查具有自定义 URL 方案的链接是否支持该链接。
    const supported = await Linking.canOpenURL(url);
    if (supported) {
      // 打开某些应用程序的链接，如果 URL 方案是“http”，则应打开 Web 链接
      // 通过手机中的某些浏览器
      await Linking.openURL(url);
    } else {
      Alert.alert(`不知道如何打开这个网址： ${url}`);
    }
  }, [url]);
  return <Button title={children} onPress={handlePress} />;
};

export default function App() {
  return (
    <View style={styles.container}>
      <OpenURLButton url={supportedURL}>
        打开支持的 URL
      </OpenURLButton>
      <OpenURLButton url={unsupportedURL}>
        打开不支持的 URL
      </OpenURLButton>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
import React, { useState } from "react";
import {
  Alert, Modal, StyleSheet, Text, Pressable, View
} from "react-native";

const App = () => {
  const [modalVisible, setModalVisible] = useState(false);
  return (
    <View style={styles.centeredView}>
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          Alert.alert("模态已关闭");
          setModalVisible(!modalVisible);
        }}
      >
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text style={styles.modalText}>Hello World!</Text>
            <Pressable
              style={[styles.button, styles.buttonClose]}
              onPress={() => setModalVisible(!modalVisible)}
            >
              <Text style={styles.textStyle}>Hide Modal</Text>
            </Pressable>
          </View>
        </View>
      </Modal>
      <Pressable
        style={[styles.button, styles.buttonOpen]}
        onPress={() => setModalVisible(true)}
      >
        <Text style={styles.textStyle}>Show Modal</Text>
      </Pressable>
    </View>
  );
};

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 22
  },
  modalView: {
    margin: 20,
    backgroundColor: "white",
    borderRadius: 20,
    padding: 35,
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5
  },
  button: {
    borderRadius: 20,
    padding: 10,
    elevation: 2
  },
  buttonOpen: {
    backgroundColor: "#F194FF",
  },
  buttonClose: {
    backgroundColor: "#2196F3",
  },
  textStyle: {
    color: "white",
    fontWeight: "bold",
    textAlign: "center"
  },
  modalText: {
    marginBottom: 15,
    textAlign: "center"
  }
});

export default App;

提供一种在封闭视图上方呈现内容的简单方法

PixelRatio

1
2
3
4
5
var image = getImage({
  width: PixelRatio.getPixelSizeForLayoutSize(200),
  height: PixelRatio.getPixelSizeForLayoutSize(100)
});
<Image source={image} style={{ width: 200, height: 100 }} />;

提供对设备像素密度的访问

RefreshControl

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
39
40
41
import React from 'react';
import {
  RefreshControl, SafeAreaView, ScrollView, StyleSheet, Text
} from 'react-native';
const wait = (timeout) => {
  return new Promise(resolve => setTimeout(resolve, timeout));
}
export default function App() {
  const [refreshing, setRefreshing] = React.useState(false);
  const onRefresh = React.useCallback(() => {
    setRefreshing(true);
    wait(2000).then(() => setRefreshing(false));
  }, []);
  return (
    <SafeAreaView style={styles.container}>
      <ScrollView
        contentContainerStyle={styles.scrollView}
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={onRefresh}
          />
        }
      >
        <Text>下拉看 RefreshControl 指标</Text>
      </ScrollView>
    </SafeAreaView>
  );
}

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

该组件在 ScrollView 内部使用，以添加下拉刷新功能

StatusBar

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
import React, { useState } from 'react';
import { Button, Platform, SafeAreaView, StatusBar, StyleSheet, Text, View } from 'react-native';

const STYLES = ['default', 'dark-content', 'light-content'];
const TRANSITIONS = ['fade', 'slide', 'none'];

const App = () => {
  const [hidden, setHidden] = useState(false);
  const [statusBarStyle, setStatusBarStyle] = useState(STYLES[0]);
  const [statusBarTransition, setStatusBarTransition] = useState(TRANSITIONS[0]);

  const changeStatusBarVisibility = () => setHidden(!hidden);

  const changeStatusBarStyle = () => {
    const styleId = STYLES.indexOf(statusBarStyle) + 1;
    if (styleId === STYLES.length) {
      setStatusBarStyle(STYLES[0]);
    } else {
      setStatusBarStyle(STYLES[styleId]);
    }
  };

  const changeStatusBarTransition = () => {
    const transition = TRANSITIONS.indexOf(statusBarTransition) + 1;
    if (transition === TRANSITIONS.length) {
      setStatusBarTransition(TRANSITIONS[0]);
    } else {
      setStatusBarTransition(TRANSITIONS[transition]);
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar
        animated={true}
        backgroundColor="#61dafb"
        barStyle={statusBarStyle}
        showHideTransition={statusBarTransition}
        hidden={hidden} />
      <Text style={styles.textStyle}>
        StatusBar Visibility:{'\n'}
        {hidden ? 'Hidden' : 'Visible'}
      </Text>
      <Text style={styles.textStyle}>
        StatusBar Style:{'\n'}
        {statusBarStyle}
      </Text>
      {Platform.OS === 'ios' ? (
        <Text style={styles.textStyle}>
          StatusBar Transition:{'\n'}
          {statusBarTransition}
        </Text>
      ) : null}
      <View style={styles.buttonsContainer}>
        <Button
          title="Toggle StatusBar"
          onPress={changeStatusBarVisibility} />
        <Button
          title="Change StatusBar Style"
          onPress={changeStatusBarStyle} />
        {Platform.OS === 'ios' ? (
          <Button
            title="Change StatusBar Transition"
            onPress={changeStatusBarTransition} />
        ) : null}
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ECF0F1'
  },
  buttonsContainer: {
    padding: 10
  },
  textStyle: {
    textAlign: 'center',
    marginBottom: 8
  }
});

export default App;

控制应用程序状态栏的组件

StyleSheet

StyleSheet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  paragraph: {
    fontSize: 16,
  },
  label: {
    fontSize: 11,   
    textTransform: 'uppercase'
  }
});

<Text style={styles.paragraph}>段落</Text>
<Text style={styles.label}>标签</Text>

StyleSheet 是一种抽象，它通过使用二维 JavaScript 对象接受 CSS 样式规则来替代 CSS

style 属性

1
2
3
4
5
6
7
<Text style={styles.paragraph} />
<Text style={{ fontSize: 16 }} />
<Text
  style={[
    styles.paragraph, { color: 'red' }
  ]}
/>

可以使用 style={} 属性设置组件的样式，该属性接受对象作为内联样式、样式表创建的样式定义或一组对象/定义来组成样式

使用样式表定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 使用内联样式
const AwesomeBox = () => (
  <View style={{
    width: 100, height: 100,
    backgroundColor: 'red' }} />
);
// 使用样式表 API
const AwesomeBox = () => (
  <View style={styles.box} />
);
 
const styles = StyleSheet.create({
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'red'
  },
});

动态样式

1
2
3
4
5
6
7
8
9
10
// 如果 props.isActive 为真 则在 `paragraph`
// 样式之上应用 `selected` 样式
function Item(props) {
  return (
    <Text style={[
      styles.paragraph,
      props.isActive && styles.selected
    ]} />
  );
}

React Native 中的 Flex

1
2
3
4
5
<View style={{ flexDirection: 'row' }}>
  <View style={{ flex: 1 }} />
  <View style={{ flex: 1 }} />
  <View style={{ flex: 1 }} />
</View>

布局是用类似 Flex 的规则定义的，以适应各种屏幕尺寸。Web 上的 Flex 和 React Native 中的 Flex 之间的主要区别在于不需要带有 display: flex 的父元素

flexDirection

1
2
3
4
5
<View style={{ flexDirection: 'row' }}>
  <View style={{ flex: 1 }} />
  <View style={{ flex: 1 }} />
  <View style={{ flex: 1 }} />
</View>

flexDirection 样式属性确定子元素的布局方向和顺序，可以是row、row-reverse、column或column-reverse

justifyContent

1
2
3
4
5
6
7
8
<View style={{
  flexDirection: 'row',
  justifyContent: 'flex-start'
}}>
  <View style={{ flex: 1 }} />
  <View style={{ flex: 1 }} />
  <View style={{ flex: 1 }} />
</View>

样式属性决定了子元素在父容器中的定位方式，可以是 center、flex-start、flex-end、space-around、space-between 或 space-evenly。

React Native 中的尺寸

1
2
3
4
5
6
7
<View
  style={{
    width: 50,
    height: 50,
    backgroundColor: 'powderblue'
  }}
/>

默认所有尺寸都是无单位的，并且表示与密度无关的像素

Props

View Style Props

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React from "react";
import { View, StyleSheet } from "react-native";

export default function ViewStyle() {
  return (
    <View style={styles.container}>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "space-between",
    backgroundColor: "#fff",
  },
});
:- –
backfaceVisibility #
backgroundColor #
borderBottomColor #
borderBottomEndRadius #
borderBottomLeftRadius #
borderBottomRightRadius #
borderBottomStartRadius #
borderBottomWidth #
borderColor #
borderEndColor #
borderLeftColor #
borderLeftWidth #
borderRadius #
borderRightColor #
borderRightWidth #
borderStartColor #
borderStyle #
borderTopColor #
borderTopEndRadius #
borderTopLeftRadius #
borderTopRightRadius #
borderTopStartRadius #
borderTopWidth #
borderWidth #
elevation Android #
opacity #

Text Style Props

:- –
color #
fontFamily #
fontSize #
fontStyle #
fontWeight #
includeFontPadding Android #
fontVariant #
letterSpacing #
lineHeight #
textAlign #
textAlignVertical Android #
textDecorationColor iOS #
textDecorationLine #
textDecorationStyle iOS #
textShadowColor #
textShadowOffset #
textShadowRadius #
textTransform #
writingDirection iOS #

Shadow Props

:- –
shadowColor #
shadowOffset iOS #
shadowOpacity iOS #
shadowRadius iOS #

Layout Props

:- –
alignContent #
alignItems #
alignSelf #
aspectRatio #
borderBottomWidth #
borderEndWidth #
borderLeftWidth #
borderRightWidth #
borderStartWidth #
borderTopWidth #
borderWidth #
bottom #
direction #
display #
end #
flex #
flexBasis #
flexDirection #
flexGrow #
flexShrink #
flexWrap #
height #
justifyContent #
left #
margin #
marginBottom #
marginEnd #
marginHorizontal #
marginLeft #
marginRight #
marginStart #
marginTop #
marginVertical #
maxHeight #
maxWidth #
minHeight #
minWidth #
overflow #
padding #
paddingBottom #
paddingEnd #
paddingHorizontal #
paddingLeft #
paddingRight #
paddingStart #
paddingTop #
paddingVertical #
position #
right #
start #
top #
width #
zIndex #

Image Style Props

1
2
3
4
5
6
7
8
<Image
  style={{
    resizeMode: "contain",
    height: 100,
    width: 200
  }}
  source={require("@expo/snack-static/react-native-logo.png")}
/>
:- –
backfaceVisibility #
backgroundColor #
borderBottomLeftRadius #
borderBottomRightRadius #
borderColor #
borderRadius #
borderTopLeftRadius #
borderTopRightRadius #
borderWidth #
opacity #
overflow #
overlayColor #
resizeMode #
tintColor #
评论
avatar
竹山一叶
技术分享 个人心得
文章
437
标签
26
分类
19
Follow Me
公告
欢迎光临小站，这里是我日常工作和学习中收集和整理的总结，希望能对你有所帮助：）

本站的内容经过个人加工总结而来，也参考了网友们分享的资料，如有侵权，请第一时间联系我，我将及时进行修改或删除😊
最新文章
设备唯一标识方法（Unique Identifier）：如何在 Windows 系统上获取设备的唯一标识
设备唯一标识方法（Unique Identifier）：如何在 Windows 系统上获取设备的唯一标识
Python中使用urlencode提示not a valid non-string sequence or mapping object
Python中使用urlencode提示not a valid non-string sequence or mapping object
查看动态链接库dll或exe文件的依赖项
查看动态链接库dll或exe文件的依赖项
应用程序无法正常启动(0xc0150002)的解决思路
应用程序无法正常启动(0xc0150002)的解决思路
10种HTML禁止鼠标右键方法，你知道几种？
10种HTML禁止鼠标右键方法，你知道几种？
分类
标签
HexoGithubButterflyValineMarkdownGitLinuxSSHNginxIntelliJ IDEA/PyCharmAndroid StudioAndroidVisual Studio CodeUVCCameraGradleCMakeChromeToolsC++其他JNAVSCodePythonSVNJavaBAT
归档
网站资讯
文章数目 :
437
已运行时间 :
本站总字数 :
431.6k
本站访客数 :
本站总访问量 :
最后更新时间 :
文章归档文章分类文章标签复制本文标题复制本文地址
新窗口打开转到链接复制链接
随便逛逛