React Native从零单排4 暗黑模式和i18n国际化

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;