RN版本：0.64
系統：Win10

前言

本系列文檔是React Native學習筆記，主要記錄學習過程中遇到的問題和注意點。 如果有人希望按照此文檔開始學習，那么最好有一些Android和前端開發基礎，因為此文檔只會記錄作者的學習過程中的重點難點,而不會詳細列出每一個步驟。

1.暗黑模式

OS13 的暗黑模式推出以后，蘋果在前段時間強制要求應用必須適配暗黑模式，不適配的應用將面臨下架的問題，現在不得不去適配了。
React Native 0.62版本增加了一個新的模塊用來支持黑暗模式，即Appearance模塊， 通過這個模塊開發者可以設置應用的主題是深色還是亮色。
有以下兩種途徑:

// 示例 Appearance
import { Appearance } from 'react-native';

const colorScheme = Appearance.getColorScheme();
if (colorScheme === 'dark') {
  // Use dark color scheme
}

// 示例 Hook
import React from 'react';
import { Text, StyleSheet, useColorScheme, View } from 'react-native';

const App = () => {
  const colorScheme = useColorScheme();
  return (
    <View style={styles.container}>
      <Text>useColorScheme(): {colorScheme}</Text>
    </View>
  );
};

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

export default App;

2.i18n國際化

我們在開發海外應用時，國際化是不可避免的。為了解決這個問題，我們需要使用一個第三方庫react-native-i18n ，通過以下方式引入node包

使用yarn：yarn add react-native-i18n；
使用npm：npm install react-native-i18n --save；

，這里我們統一將國際化資源文件放在languages目錄下，目錄結構如下

ios
android
src
languages
  |__ en.js // English
  |__ zh.js // Chinese
  |__ index.js 
...

index.js文件如下:

/**
 * 多語言配置文件
 */
import I18n from 'i18n-js';
import * as RNLocalize from 'react-native-localize';
import cn from './cn';
import en from './en';

const locales = RNLocalize.getLocales();
const systemLanguage = locales[0]?.languageCode; // 用戶系統偏好語言

if (systemLanguage) {
  I18n.locale = systemLanguage;
} else {
  I18n.locale = 'en'; // 默認語言為英文
}

I18n.fallbacks = true;
I18n.translations = {
  zh: cn,
  en,
};

export default I18n;

cn.js:

export default {
  privacy: '隱私政策',
  terms: '服務條款',
  back: '返回',
};

en.js:

export default {
  privacy: 'Privacy Policy',
  terms: 'Terms of Service',
  back: 'Back',
};

使用:

/**
 * Demo
 */
import React from 'react';
import {View, Text} from 'react-native';
import I18n from '../../languages/index';

const Demo = () => {
  return (
    <View>
        <Text>{I18n.t('privacy')}</Text> // 隱私政策 Privacy Policy
    </View>
  );
};

export default Demo;