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;

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容