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;