- 内容简介
- 译者序
- 前言
- 第 1 章 安装配置新项目
- 第 2 章 Flexbox 布局介绍
- 第 3 章 用 React Native 开发一个应用
- 第 4 章 在 React Native 中使用导航
- 第 5 章 动画和滑动菜单
- 第 6 章 用 React Native 绘制 Canvas
- 第 7 章 使用 React Native 播放音频
- 第 8 章 你的第一个自定义视图
- 第 9 章 Flux 介绍
- 第 10 章 处理复杂的应用程序状态
- 第 11 章 使用 Node 来实现服务端 API
- 第 12 章 在 React Native 中使用文件上传
- 第 13 章 理解 JavaScript Promise
- 第 14 章 fetch 简介
- 第 15 章 在 iOS 中使用 SQLite
- 第 16 章 集成 Google Admob
- 第 17 章 React Native 组件国际化
- 附录 A React.js 快速介绍
- 附录 B Objective-C Primer
- 附录 C webpack 入门
文章来源于网络收集而来,版权归原创者所有,如有侵权请及时联系!
安装步骤
我们将创建一个通用模块来实现语言转换功能。创建步骤如下:
react-native init LocalizationSample
react-native new-library LocalizationHelper
请阅读第 7 章的相关内容,需要学会配置文件,将原生的库链接到项目中。
LocalizationHelper.h 和 LocalizationHelper.m 文件的内容如下:
LocalizationHelper.h #import "RCTBridgeModule.h" #import <Foundation/Foundation.h> #import "RCTBridgeModule.h" #import "RCTLog.h" @interface LocalizationHelper : NSObject <RCTBridgeModule> @end LocalizationHelper.m #import "LocalizationHelper.h" @interface LocalizationHelper() -(NSString *)getCurrentLanguage; @end @implementation LocalizationHelper RCT_EXPORT_MODULE() -(NSString *)getCurrentLanguage{ return [[NSLocale preferredLanguages] objectAtIndex:0]; } RCT_EXPORT_METHOD(getLanguage:(RCTResponseSenderBlock)callback){ NSString * language = [self getCurrentLanguage]; NSLog(@"Language: %@", language); callback(@[[NSNull null], language]); } - (NSDictionary *)constantsToExport
{ return @{ @"language": [self getCurrentLanguage]}; } @end
代码很容易理解。
现在需要在根目录下创建一个 LocalizedStrings.js 的文件,内容如下:
'use strict'; var localization = require('NativeModules').LocalizationHelper; var interfaceLanguage = localization.language; class LocalizedStrings{ _getBestMatchingLanguage(language, props){ // props[language] 存在则返回 if (props[language]) return language; // 返回默认语言 return Object.keys(props)[0]; } constructor(props) { // 缓存传入的字符串 this.props = props; // 设置语言默认值 this.setLanguage(interfaceLanguage); } // 可以在 class 外部使用,来强制指定一种语言 // 与默认的语言独立互不影响 setLanguage(language){ // 检查是否有符合当前语言的转换字符集 // 如果没有使用默认语言 var bestLanguage = this._getBestMatchingLanguage(language, this.props); this.language = bestLanguage;
// 将获取的语言对象关联到 this 中的 language 属性上 if (this.props[bestLanguage]){ //console.log("There are strings for the language:"+ language); var localizedStrings = this.props[this.language]; for (var key in localizedStrings){ //console.log("Checking property:"+key); if (localizedStrings.hasOwnProperty(key)) { //console.log("Associating property:"+key); this[key] = localizedStrings[key]; } } } } // 获取当前使用的语言 getLanguage(){ return this.language; } // 获取接口中的语言(有可能与当前使用的语言不同) getInterfaceLanguage(){ return interfaceLanguage; } // 下面这个方法也可以获取接口中的语言 // 但是现在基本没用了,因为 ReactLocalization 类中已经暴露了这个字段, // 可以直接获取了 // 在这里放置这段注释的代码只是为了举例说明而已 /* _getLanguage(){ var deferred = Q.defer(); localization.getLanguage((error, deviceLanguage)=>{ var language = deviceLanguage; console.log("Language in js:"+language);
deferred.resolve(language); }); return deferred.promise; } */ } module.exports = LocalizedStrings;
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论