开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在路由到另一个屏幕后，React Native和i18n返回到默认语言

React Native是一种用于构建跨平台移动应用程序的开发框架，而i18n是国际化（Internationalization）的缩写，用于实现应用程序的多语言支持。

在路由到另一个屏幕后，React Native和i18n返回到默认语言的过程如下：

确定默认语言：在应用程序中，可以事先设定一个默认语言，用于在没有用户选择语言时作为备选。默认语言通常是应用程序的主要语言或者是最常用的语言。
路由到另一个屏幕：当用户在React Native应用程序中导航到另一个屏幕时，可以使用React Navigation等导航库来管理屏幕之间的切换。
语言切换处理：在React Native中，可以使用i18n库来实现多语言支持。当用户选择切换语言时，可以通过调用i18n库提供的方法来更新应用程序的当前语言。
返回到默认语言：如果用户在另一个屏幕选择了切换语言，但在返回时没有选择其他语言，应用程序可以通过检查当前语言是否与默认语言相同来确定是否需要返回到默认语言。
更新界面：一旦确定需要返回到默认语言，应用程序可以使用i18n库提供的方法来切换回默认语言，并更新界面上显示的文本、图像等内容。

在React Native中，可以使用react-i18next等库来实现i18n的功能。对于推荐的腾讯云相关产品，可以考虑使用腾讯云的云服务器（CVM）来部署React Native应用程序，使用腾讯云的对象存储（COS）来存储应用程序的多语言资源文件，使用腾讯云的内容分发网络（CDN）来加速多语言资源文件的传输，以提供更好的用户体验。

腾讯云云服务器（CVM）产品介绍链接地址：https://cloud.tencent.com/product/cvm 腾讯云对象存储（COS）产品介绍链接地址：https://cloud.tencent.com/product/cos 腾讯云内容分发网络（CDN）产品介绍链接地址：https://cloud.tencent.com/product/cdn

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

React-Native组件之 Navigator和NavigatorIOS

对于app而言，一款应用往往涉及到很多的页面，而页面之间的跳转Android和iOS实现也各不相同。...Navigator 与 NavigatorIOS 在移动开发过程中，几乎所有的APP中或多或少都会涉及到多个界面间的切换，在React Native中有两个组件负责实现这样的效果 —— Navigator...Navigator可以在iOS和Android同时使用，而NavigatorIOS则是包装了UIKit库的导航功能，使用户可以使用左划功能来返回到上一界面。...pop()返回到上一页 replace(route)替换当前页的路由，并立即加载新路由的视图 replacePreviousAndPop(route)替换上一页的路由/视图并且立即切换回上一页...resetTO(route)替换最顶级的路由并且回到它 replaceAtIndex替换指定路由 popToRoute(route)一直回到某个指定的路由 NavigatorIOS实例和

4.5K7 0

react-navigation导航器

导航还可以渲染通用元素，例如可以配置的标题栏和选项卡栏。 react-natvigation自开源以来。在短短不到3个月的时间，github上星数已达4000+。...它是Fb推荐使⽤库，并且在React Native当前最新版本0.44中将Navigator删除。react-navigation据称有原生般的性能体验效果。...link它(关联原生)： react-native link react-native-gesture-handler 此时ios已经可以跑了。...补白概念在开始学习导航器之前，我们需要了了解两个和导航有关的概念: Screen navigation prop(屏幕导航属性)：通过navigation可以完成屏幕之间的调度操作，例如打开另一个屏幕...StackNavigatorConfig (可选):配置导航器器的路路由(如:默认⾸首屏，navigationOptions，paths 等)样式(如，转场模式mode、头部模式等)。

6.3K2 0

多语言站点react前端框架i18next

在 react 中，其实已经有人封装了多语言的扩展库，我们只需要安装它就可以在我们的 react 项目中实现网站的多语言切换。下面我们简单介绍下如何使用它。...import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; i18n .use(initReactI18next...{ code: "zh", native: "Chinese" }, ]; export default function App() { const { t, i18n } = useTranslation...already safes from xss } }); export default i18n; i18next 此外还支持热更新，还支持 SSR，它还提供了Trans组件，可以让你方便的集成到项目中...总之，i18next 是非常不错的多语言站点插件，更多的使用方法和介绍你可以参考官网。

2.7K2 0

我不认为Flutter比React Native好

共享代码、知识与开发者除了招聘之外，决定 Flutter 和 React Native 谁更强的另一个重要因素，就是共享代码、知识与开发者的规模。在软件开发领域，有什么是比代码好更重要的？...而 React Native 虽然缺少内置支持，但其中的第三方 i18n 支持确实越来越好。小总结：没有输赢——两大平台在国际化方面都表现不错，但也各自存在一些局限。...内置导航（及更多） Flutter 在设计上比 React Native 更贴心，最典型的体现就是它带有自己的导航 / 路由解决方案。...导航属于特别适合集成到核心框架中的模块，因为它对大多数应用程序来说非常重要。大家可以想象一下不带路由程序的 Next.js……那就基本废了。...Dart 和 JavaScript/TypeScript 之间当然有区别，但这又是另一个话题，不在本文的讨论范围内了。最后，对本文观点持赞同或不同意见的读者，都不妨在留言中聊聊自己的看法。

2.5K2 0

React Native vs. Cordova、PhoneGap、Ionic，等等

(译注: 老司机口头禅) 学习目标当你读完本文后，希望你能重新回到这里，并能够轻松回答以下问题: 什么是原生应用？什么是 WebView UI ？更原生化的框架的优势和劣势分别是什么？...由于在不同语言之间进行模拟和翻译的开销较低，通常它的运行效率更高。但现实是残酷的，它的代码通常更难编写和理解。另一方面，对于原生化更少的框架来说，通常编写代码更为简单。...编码语言也更容易理解和简洁(需要的代码少)。它的词汇更接近与我们人类的自然语言。它不需要我们十分了解硬件的构成以及它在幕后的工作方式。...但是，这一切便利的代码就是通常会牺牲一些效率和自由度。移动端框架阵营在 React Native 出现之前，移动端框架一般分为两个阵营。...这无疑降低了 Web 设计师和开发人员的门槛。当需要时，React Native 还提供了一种渗透到原生框架的方法，以实现我们希望在应用中实现的任何原生功能。这有点像在黑客帝国中打电话。 ?

3.2K4 0

react-loadable懒加载

React Loadable是一个小型库，它使以组件为中心的代码分割变得非常容易。背景当你的React应用，你把它和Webpack捆绑在一起，一切都很顺利。...，如果很多的时候，那么你的应用首屏展现的时候就会变得非常慢了。...react-loadable的作用由于路由只是组件，我们仍然可以在路由级别轻松地进行代码拆分。在你的应用程序中引入新的代码分割点应该是如此简单，以至于你不会再三考虑。...这应该是一个改变几行代码和其他一切都应该自动化的问题。 Loadable是一个高阶组件(一个创建组件的函数)，它允许您在将任何模块呈现到应用程序之前动态加载它。...; let i18n = loaded.i18n; return ; } }); 简单使用安装 npm i react-loadable

2.6K1 0

【前端技术丨主题周】Angular 核心概念与框架演进

不仅仅在Angular 中，在类似的React、Ember 或Polymer 等框架中也是很常见的。这种开发方式就是构建一个个小的组织代码单元，每个代码单元的职责定义清晰，并且可以在多个应用中复用。...它有很多作用，比如形象地勾勒出UI 界面的组成，这种树形结构也体现了从一个组件到另一个组件的数据流动，Angular 也依赖组件树做出合适的变化监测策略。一个博客模块的组件树例子如下。 ?...其功能涵盖了创建项目、生成组件、配置路由、代码格式化、启动开发服务器、构建测试、运行测试、预处理CSS 样式和部署前的构建，等等。...当然，为了开发强大的应用，Angular 在功能开发上也提供了不少辅助模块，例如： i18n 模块，用于语言国际化、符号时间等本地化。路由模块，用于构建多界面状态的单页应用。...ionic2、NativeScript、React Native 等移动端技术，用来开发跨平台的混合或原生应用。 Meteor 等框架，可以用来实现JavaScript 全栈式开发和高效整合。

9K1 0

React Native 导航：示例教程

在构建移动应用程序时，首要考虑的是如何处理用户在应用程序中的导航问题，例如屏幕的展示和屏幕之间的切换。 React Navigation 是 React Native 最著名的导航库之一。...理解堆栈导航器与原生堆栈导航器的区别在 React Native 中，我们有两个堆栈导航库： @react-navigation/stack 和 @react-navigation/native-stack...然而，默认情况下，虽然 @react-navigation/stack 被配置为具有熟悉的 iOS 和 Android 外观和感觉，并且可以自定义动画，但 @react-navigation/native-stack...*/ yarn add @react-navigation/bottom-tabs 我们创建一个 ContactScreen 文件，在应用程序中添加另一个屏幕： /* components/ContactScreen.js...React Navigation 中向屏幕传递参数向路由传递参数有两个简单的步骤：传递参数，然后在子路由或屏幕中读取参数。

3401 0

基于React Native的移动平台研发实践分享

思考一：React Native 的学习成本和可替换性作为移动平台，不得不考虑的是学习成本，在企业的供应商中是否能够对React Native的技术储备达到相关的要求，如何能够屏蔽对于技术实现的细节。...思考三：React Native 的调试的首屏进入VS 当前屏刷新对于开发工程师，很重要的工作就是调试，以RN默认的单Bundle模式，势必会带来另外一个挑战，就是当资源发生任何变化时，必须重复上述的打包...另外，虽然React Native 默认不承诺跨平台，但跨平台（即一套代码同时支持iOS、Andriod）是移动平台的必备特性了。如何能够支持多屏同时调试，也将是一个必须考虑的问题。...回到热更本身，我认为，基于React Native 进行热更应该是一个必须的特性，而实际上我们需要提高要求，提供按需更新的能力。...DSL语言会在开发期编译成JSX，然后再编译成可被React Native 运行的javascript（涉及到拆分Bundle和编译，这里暂不展开）。

1.2K9 0

React为什么不将Vite作为默认推荐？

「Theo」就在React文档仓库发起了一个PR[1]，号召React文档不要再默认推荐CRA，而是应该将Vite作为构建应用的首选。...要彻底解决这个问题，需要配合3类技术方案：数据请求方案（解决数据流向问题）路由方案（解决数据请求时机问题）打包方案（解决懒加载的实现问题）类似的问题还有很多，比如CSR首屏渲染速度慢的问题（需要通过...因为单纯使用Vite并没有解决最佳实践的缺失，必须在此基础上实现那些最佳实践（比如路由、数据请求...），那又回到了「开发一个全栈框架」。...回到开篇的问题：React为什么不将Vite作为默认推荐？如果是用Vite取代webpack作为CRA的打包工具，未来可能会。但是，这不是最首要的问题。...如何协助上层的框架更好的服务开发者，才是React团队首要考虑的问题。 React不死，他只会逐渐移居幕后。

1.3K1 0

React Native 在 Airbnb 的起起落落

从全面拥抱 React Native 到回归 Native，在这期间发生了什么？...首屏性能主要难点在于：初始化时间：初始化 React Native 运行时的开销在所难免，大型应用在即使在（2018 年的）高端设备上也需要几秒开始渲染的前置时间：先要经过 JS 线程、yoga 布局线程...如何跨平台测试、保证代码在多平台都能正常工作？如何决定新特性该用什么技术去实现？如何招聘和分配团队资源？...既定的质量标准：React Native 的不断成熟与实践中积累的经验带来了一些性能提升，但有些技术问题（比如初始化和首屏异步渲染）仍然充满挑战，内部外部的资源匮乏加剧了这种困难不必为一个产品功能分平台开发两套移动端代码...至此，React Native 在 Airbnb 的故事结束了从押宝 React Native，到遭遇技术、团队组织难题，再到权衡利弊之后决定放弃，最后转而全力投入 Native 体系，并将 React

8591 0

『React Navigation 3x系列教程』createBottomTabNavigator开发指南

createBottomTabNavigator API createBottomTabNavigator(RouteConfigs, BottomTabNavigatorConfig): RouteConfigs(必选)：路由配置对象是从路由名称到路由配置的映射...BottomTabNavigatorConfig(可选)：配置导航器的路由(如：默认首屏，navigationOptions，paths等)样式(如，转场模式mode、头部模式等)。...，在Android平台上默认使用TabBarTop。...当用户单击Go Back按钮时，通过： navigation.goBack(); 实现了返回到默认的Tab。...另外，也可以通过最新版React Native+Redux打造高质量上线App视频教程学习React Navigation3x开发的更多实战经验和技巧，以及优化思路。

7.1K3 0

干货 | 近万字长文详述携程大规模应用RN的工程化实践

2013年加入携程，主要负责App基础框架研发相关工作，目前重点关注React Native技术在公司的推广和研发支持、无线框架和工程架构升级。...一、RN在携程的使用情况 2015年3月React Native iOS开源，半年之后Android开源。...携程于2016年6月份投入资源在React Native框架的预研，并于8月份正式上线，至今已有2年多。...= React Native; }, 12, null, "react-native-implementation"); // 尾部 -- 引擎初始化和入口模块执行 ;require(50...我们使用了荣耀7X（千元机，性能偏中低端）进行测试，已经基本感知不到首屏加载和native有什么差别了。

1.6K4 0

『React Navigation 3x系列教程』之React Navigation 3x开发指南

解锁React Native开发新姿势，一网打尽React Native最新与最热技术，点我Get!!! 随着React Navigation逐渐稳定，Navigator也被光荣的退休了。...在React Native生态环境中需要一款可扩展且易于使用的导航组件，Navigator 自然胜任不了，这时React Native社区便孕育出了一个开源导航组件React Navigation。...在开始学习7种导航器之前，我们需要先了解两个和导航关于概念： Screen navigation prop(屏幕导航属性)：通过navigation可以完成屏幕之间的调度操作，例如打开另一个屏幕； Screen...StackActions Reset ：重置当前 state 到一个新的state； Replace ：使用另一个路由替换指定的路由； Push ：在堆栈顶部添加一个页面，然后跳转到该页面； Pop...另外，也可以通过最新版React Native+Redux打造高质量上线App视频教程学习React Navigation3x开发的更多实战经验和技巧，以及优化思路。

4.3K3 0

【Hybrid开发高级系列】ReactNative(四) —— 基础开发技巧

你可以在路由中任意自定义参数以区分标记不同的场景，我们在这里仅仅使用title作为演示。 1.9.4 将场景推入导航栈# 要过渡到新的场景，你需要了解push和pop方法。...和红屏报警类似，你可以使用console.warn()来手动触发黄屏警告。在默认情况下，开发模式中启用了黄屏警告。...(例如上面的代码会屏蔽掉所有以Warning开头的警告内容) 红屏和黄屏在发布版(release/production)中都是自动禁用的。...在React Native里，我们都是自动对这些元素进行舍入。在进行舍入时，我们必须相当的小心。你永远不希望在同一时间使用正常值和四舍五入的值，那就好像你正在不断的积累舍入误差。...在React Native里，在JS和布局引擎里的一切值都是以一个任意精度的数来进行工作的。这只会发生在当在为主线程里我们进行舍入的原生元素设定任意位置和尺寸的时候。

3952 0

React Native之常用第三方库

那么我们今天说说在React Native项目开发中常见的一些第三方库。...Picker就是ReactNative界的Spinner,其常用的属性有： onValueChange 这个方法在方法在选择Picker某一项时调用可传两个参数选择的value和position...selectedValue 这个属性是选择的值 enabled 设置是否可点击 Android属性 mode 设置样式 Android属性 dropdown下拉样式和dialog弹窗样式默认是dialog...CheckBox多选 react-native-splash-screen 启动白屏问题 react-native-simple-router 简易路由跳转框架 react-native-storage.../react-native-myCalendar 语言转化和一些常用格式转换 https://github.com/joshswan/react-native-globalize 单选多选ListView

8.8K10 1

干货 | 如何一步步打造基于React的移动端SPA框架

相比Vue，我们将来迈进React Native将更近。 JSX比在模板中嵌入表达式更适合JavaScript。...第三步，有了接口数据缓存，但仍没有解决首屏数据首次记载的问题。这一步就是通过在发布APP前，打包最新首屏接口数据以JSON的格式一起打包到APP中，同时首屏图片资源也一起打包进APP。...我们的这层处理方案：服务端和客户端用了两个不同React组件来处理，服务端组件仅包含首屏的数据结构，在服务端通过Node渲染好，呈现给用户和搜索引擎。...我们总结了几点： React文件太大，导致加载JS耗时增加，导致首屏慢。此问题可以用react-lite代替React上线来解决。现在随着React的升级，该问题也会被官方慢慢在解决。...这其实是在项目前期，我们心里对Redux还是有所抵触，思维要从原来的操作DOM到操作React这种状态操作，同时对从React直接操作状态到通过action去更改组件状态，的确需要时间消化。

1.7K10 0

『React Navigation 3x系列教程』之createStackNavigator开发指南

解锁React Native开发新姿势，一网打尽React Native最新与最热技术，点我Get!!!...屏幕转场风格默认情况下，createStackNavigator提供了转场过渡效果，在Android和iOS上过渡效果是不同的，这也是React Native重平台性的一个体现，在Android上从屏幕底部淡入...createStackNavigator API createStackNavigator(RouteConfigs, StackNavigatorConfig): RouteConfigs(必选)：路由配置对象是从路由名称到路由配置的映射...StackNavigatorConfig(可选)：配置导航器的路由(如：默认首屏，navigationOptions，paths等)样式(如，转场模式mode、头部模式等)。...另外，也可以通过最新版React Native+Redux打造高质量上线App视频教程学习React Navigation3x开发的更多实战经验和技巧，以及优化思路。

5K1 0

【QQ音乐web团队】：ReactJS 服务端同构实践

服务端生成 HTML 直出返回到前端，用户访问时首屏内容就直接可见。前端执行时依然在内存中 render 出节点，但会通过对根节点（已有直出内容）进行校验判断是否需要继续做 DOM diff。...考虑到方便前后端调用相同的代码。...路由层 - React Router 在路由层我们使用了 React-Router。...React-Router 路由配置在服务端初始化路由时，要先使用当前的 location 来 match 出首屏的路由。因为在 match 过程中要处理重定向和404等。...避免前端路由上的按需加载与首屏直出冲突。

2K7 0

React Native 系列(八) -- 导航

常用方法 push(route) : 加载一个新的页面（视图或者路由）并且路由到该页面。 pop()：返回到上一个页面。 popN(n)：一次性返回N个页面。...文件初始化一个路由，指定Component为HelloViewComponent，我们需要先导入HelloViewComponent.js文件到index.ios.js中，因此，index.ios.js...，安卓默认关闭 screen：对应界面名称，需要填入import之后的页面 mode：定义跳转风格 card：使用iOS和安卓默认的风格..., } from 'react-native'; 但是从0.44这个版本开始在RN中直接导入的话，运行起来会报错 ?...yarn add react-native-deprecated-custom-components tip: 笔者在终端运行yarn add react-native-deprecated-custom-components

6K8 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭