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;
