React Nativeはゼロ単列4ダークモードとi 18 n国際化から

RN  ：0.64
  ：Win10

前言
このシリーズのドキュメントはReact Native学習ノートで、主に学習中に発生した問題と注意点を記録します.このドキュメントに従って学習を開始したい人がいる場合は、各ステップを詳細にリストしないため、Androidとフロントエンドの開発基盤があるほうがいいです.このドキュメントは、著者の学習過程の重点難点だけを記録します.
1.ダークモード
OS 13のダークモードが発売された後、アップルはこの間、ダークモードに適応しなければならないと強制的に要求し、不適切なアプリケーションは棚から降りる問題に直面し、今は適応せざるを得なくなった.React Native 0.62バージョンでは、暗いモード、すなわちAppearanceモジュールをサポートするための新しいモジュールが追加されました.このモジュール開発者は、アプリケーションのテーマが濃い色なのか明るい色なのかを設定することができます.次の2つの方法があります.

//    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 (
    
      useColorScheme(): {colorScheme}
    
  );
};

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

export default App;

2.i 18 n国際化
私たちが海外応用を開発する際、国際化は避けられない.この問題を解決するには、サードパーティ製ライブラリreact-native-i 18 nを使用して、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 (
    
        {I18n.t('privacy')} //      Privacy Policy
    
  );
};

export default Demo;