如何使用React Native在iOS、安卓和网页之间创建单个应用程序
React Native是一个开源的移动应用开发框架，它允许开发者使用JavaScript和React构建原生移动应用。通过使用React Native，开发者可以使用相同的代码库创建适用于iOS、安卓和网页的单个应用程序。
要使用React Native在iOS、安卓和网页之间创建单个应用程序，可以按照以下步骤进行：
- 安装React Native：首先，确保你的开发环境中已经安装了Node.js和npm（Node包管理器）。然后，使用npm安装React Native的命令行工具（React Native CLI）。
- 创建新项目：使用React Native CLI创建一个新的React Native项目。运行命令
npx react-native init MyApp，其中"MyApp"是你的项目名称。 - 编写代码：进入项目目录，使用你喜欢的文本编辑器打开代码文件。React Native使用JavaScript编写应用程序逻辑，你可以在
App.js文件中开始编写代码。 - 开发和调试：你可以使用任何文本编辑器进行开发，但推荐使用集成开发环境（IDE）如Visual Studio Code。React Native提供了一个开发服务器，可以在模拟器或真机上实时预览应用程序。运行命令
npx react-native start启动开发服务器，然后运行npx react-native run-ios或npx react-native run-android在模拟器或真机上运行应用程序。 - 平台特定代码：在某些情况下，你可能需要编写一些平台特定的代码。React Native提供了一种机制来处理这种情况，你可以在项目中创建不同平台的文件夹（如
ios和android），然后在这些文件夹中编写平台特定的代码。 - 网页支持：React Native本身并不直接支持在网页上运行应用程序。但是，你可以使用React Native Web库将React Native代码转换为可以在网页上运行的代码。该库提供了一些额外的组件和API，以便在网页上实现与移动应用程序相似的体验。
总结起来，使用React Native可以通过编写一次代码来创建适用于iOS、安卓和网页的单个应用程序。你可以使用React Native CLI创建项目，编写JavaScript代码，并使用开发服务器进行开发和调试。对于平台特定的代码，你可以在项目中创建不同平台的文件夹。如果需要在网页上运行应用程序，可以使用React Native Web库进行转换。
腾讯云相关产品和产品介绍链接地址：
相关·内容
React Native在幕后使用什么来与iOS和安卓交互？Cordova使用WebView在本地容器中有效地显示网页；React native是否使用相同的方法？如果不是，它使用什么方法？
浏览 0提问于2015-11-02得票数 47
回答已采纳
我是React JS的新手。我正在尝试建立一个网络应用程序，这也应该工作在移动(安卓和IOS)，所以考虑使用web application的react js，并创建了一些组件。那么在React native中使用React js组件是可能的吗？
浏览 3提问于2016-06-18得票数 9
我是React Native的新手，我想为iOS和安卓创建一个可部署的应用程序版本。
我在官方网页上看到了如何使用iOS的离线捆绑包，它工作得很好。我使用以下命令生成了离线包，没有任何问题: react-native bundle --dev false --entry-file index.ios.js -- bundle -output ios/main.jsbundle --platform ios
我做了以下更改，它在iOS上运行良好。
然而，我不能为Android做同样的事情，我在互联网上也找不到任何这样的例子。我执行了以下命令，并且正确地生成了离线包。react-native bu
浏览 8提问于2016-07-05得票数 0
我是应用程序开发的新手，这让我很困惑。 我有一个在react-native中创建的项目，我希望它在android和iOS上都可用。我看过一些关于如何为react native创建后端的firebase数据库的教程，其中一些在构建应用程序时选择了“Web”版本。 那么，我假设我只需要选择“网络”版本，我的应用程序仍然可以在iOS和安卓系统上运行，这是正确的吗？(我不需要同时选择安卓和iOS版本) 谢谢你的帮助！ ?
浏览 77提问于2021-09-08得票数 1
回答已采纳
我正在尝试将reCAPTCHA添加到我的react原生应用程序中。我使用的是GCP的React Enterprise，但是他们的为密钥的平台类型指定了网站、iOS应用程序或安卓应用程序。我的React Native应用程序可以使用iOS或安卓应用程序的站点密钥吗？如果不是，我如何生成与React Native一起工作的站点密钥？
浏览 28提问于2021-11-30得票数 1
是否有一种方法可以为一个反应本地web应用程序？设置应用程序版本和版本号？
目前，我正在使用react-native-web作为应用程序(用于IOS、安卓和网络)。
我也在使用react-native-device-info。
当前用于网页时，我使用：
DeviceInfo.getReadableVersion()、DeviceInfo.getVersion()或DeviceInfo.getBuildNumber()我只得到0.0和0。
获得版本和版本号对于android和iOS来说是完美的，但我不知道如何设置它并将其用于web。
浏览 1提问于2019-08-05得票数 1
回答已采纳
正在尝试运行react-native 0.61.2应用程序的android版本...
应用程序打算使用react-native-geolocation-service，但无法通过此错误：
“错误：@react-native-community/地理位置: NativeModule.RNCGeolocation为空。”
我知道react-native-geolocation-service在iOS上使用@react-native-community/geolocation，但这是安卓系统。我已经在整个项目中搜索了字符串RNCGeolocation，但它不在那里。如何在安卓系统上运行re
浏览 0提问于2019-12-02得票数 1
我需要使用谷歌地图的IOS和安卓的react-native博览应用程序。我找到了一个react-native-maps库，它可以方便地使用映射，但是它为IOS呈现默认的IOS映射。有一些教程向你展示了如何将谷歌地图集成到IOS上，但这些都是简单的反应--由react-native init创建的本地应用程序，而不是世博。
浏览 0提问于2018-10-19得票数 2
回答已采纳
我已经做了一个安卓应用程序，并想使用在windows和ios中开发相同的应用程序的代码。我如何使用React Native来做到这一点呢？有没有其他方法可以做到这一点(除了react native之外)。
浏览 25提问于2016-05-16得票数 0
我有一个现有的React Native应用程序。我试图为它设置一个新的Google Analytics属性，但GA强制我使用Firebase。在Firebase中，我看到我可以添加单独的Android和iOS应用程序，但我看不到将我的应用程序作为一个实体添加的方法。在谷歌开始推广Firebase之前，我能够为一个移动应用程序设置一个新的跟踪ID，并在单个RN应用程序下收集所有Android和iOS数据。
在Firebase中创建单独的iOS和安卓应用程序是为one React Native应用程序获取分析数据的正确方式吗？看起来我的分析数据将是零散的，但也许我遗漏了一些东西。
浏览 0提问于2017-06-28得票数 0
我正在为iOS和安卓开发React-Native/TypeScript应用程序。 完成加载网页(RNWebView)后，我需要超文本传输协议响应代码。 由于NavState不支持这一点，我正在考虑使用注入的JavaScript来查找状态代码。 欢迎提出任何建议！
浏览 22提问于2019-03-13得票数 0
7回答
我们将为我们的公司开始一个项目，一个订单状态应用程序，将作为web应用程序托管，以及安卓/ios app.We开始研究，并得出结论，以反应和反应原生或角度和原生Script.Can任何人建议选择其中之一，作为最终目标是维护网络和移动的单一代码库。
编辑1:感谢你为爱奥尼亚/科尔多瓦，PWA的建议，但所有这些似乎构建了一个混合的应用程序，但我正在搜索类似于可以在浏览器上运行的本机应用程序，例如在react native中的well.For示例你有这种架构，其中JavaScript文件被转换为真正的本机组件(安卓/IOS).But react-native的问题是没有单一的代码库。
浏览 0提问于2018-05-02得票数 5
我想访问我的ios应用程序创建的realm数据库，该应用程序是我使用react-native创建的。在安卓系统上使用adb pull更容易，但在ios上我没有太多的想法。有一些像这样的链接-
以上链接的
因此，如何查看react-native开发ios应用程序的realm数据库以进行开发和调试。
谢谢你的回答，但是(出于好奇)还有一个问题--但是如何找到由ios模拟器上的react原生安装的app uid ?？
浏览 44提问于2018-05-26得票数 5
回答已采纳
是否可以将android/iOS应用程序转换为react native或flutter等跨平台应用程序？ 我有一个用安卓和iOS开发的应用程序，我想把它转换成，例如，react native，这样我就可以继续自己开发它，因为我没有android/iOS的技能，但我有React Native和Flutter的技能。
浏览 21提问于2021-01-09得票数 0
我是新的反应原生开发(针对安卓和iOS)。
我正在尝试在两个移动设备之间以脱机模式(WiFi、蓝牙或其他方式)传输数据。由于数据大小的限制，二维码没有)
我发现了一个很好的库react-native-wifi-and-hotspot-wizard和react-native-wifi-hotspot，但它只支持Android，不支持iOS。
我正在寻找一个跨平台(安卓和iOS)的数据传输库，可以在2个设备之间的离线模式。
有没有人能推荐一个库或者一些代码提示？
浏览 52提问于2021-06-03得票数 3
我在react native expo项目中工作，我没有关于如何在expo project.so中创建iOS和安卓文件夹的知识，请帮助我如何创建iOS和安卓文件夹，最后如何进行最终构建。
浏览 2提问于2021-09-14得票数 0
使用toLocaleString('en-us')时，React Native不会将大数字格式化为千位分隔符。同样的问题也出现在安卓和iOS版本上。
我正在为安卓和iOS开发一个简单的计算器应用程序。我之前为web (纯javaScript)创建了一个类似的模型，并使其工作。但是，由于我将其移植到React Native，因此结果计算将不再有数千个分隔符。我的React Native演示可以在这里找到：
我的计算函数的一个示例：
text1: ( b/ ((c/100) + 1) ).toLocaleString('en-US')
如您所见，我在计算的末尾
浏览 3提问于2019-06-23得票数 1
我想为安卓和iOS构建一个移动应用，并考虑使用React Native。 有一件事我还不明白:我是必须为Android和iOS创建不同的UI，还是像Xamarin.Forms一样有一些抽象？例如，我可以说“给我一个按钮”，然后在安卓上我得到一个原生的安卓按钮，在iOS上我得到一个原生的iOS按钮，或者我必须为安卓和iOS (像Xamarin.Android和Xamarin.iOS)创建单独的视图层？
浏览 23提问于2019-12-28得票数 0
回答已采纳
我最近学习了ReactJS，并逐渐熟练地使用它构建web应用程序。我现在想使用新发现的知识构建移动应用程序(Android和iOS)。
我学习React Native就可以做到这一点了吗？而且不必学习斯威夫特(iOS)和Java (安卓)。React-Native是让移动应用运行的阻力最小的路径，这似乎是合乎逻辑的，因为我以前没有移动应用编程的经验。
如果不使用iOS和安卓的原生/传统堆栈，我是不是放弃了什么？
谢谢，- deepak
浏览 0提问于2019-03-12得票数 1
react-native-wifi-manager和react-native-android-wifi只能用于安卓设备。我正在寻找安卓和ios中可用的wifi网络列表。
浏览 0提问于2018-07-19得票数 1
回答已采纳
2回答
我尝试在react原生应用中使用自定义字体，在项目的根目录下创建assets/ fonts /文件夹，并将字体放入其中。创建react-native.config.js并写入，
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./assets/fonts/'],
};
试试react-native link，它可以在安卓上运行，但不能在ios上运行
react-native: 0.60.5
npm: 6.11.0
node: 10.16.0
浏览 5提问于2019-09-15得票数 4
[enter image description here][1]
[Android listview nothing appears][1]
[ios listview works fine][2]
[ios listview detail screen works fine.][3]
我正在使用React Native开发iOS和android APL。
React Native很棒，我想和React Native一起开发。
目前我有一个奇怪的错误。
基本上，我使用来控制TAB。
在一个TAB环境中，我添加了list-detail功能(Master-Detail类似于)。我在一个选项
浏览 1提问于2016-12-14得票数 0
我正在用react native开发一个应用程序，并在React Native中用我的安卓emulator.The SafeAreaView组件测试它，目前只适用于iOS11或更高版本的ios设备。 有人知道解决这个问题的方法吗？
浏览 23提问于2020-06-11得票数 1
回答已采纳
1回答
我正在开发一个React-Native应用程序，用户可以发送带有标题的图像，也可以创建评论。我真的很想为此支持表情符号。
目前，它只能在iOS上运行。系统键盘自动提供对表情符号的访问，并在文本视图上正确呈现。在安卓系统上，默认情况下，系统键盘不提供对表情符号的访问，iOS用户创建的表情符号也不会呈现(只有划掉的方框)。
我看到在上有一个用于安卓系统的表情符号复合库，但我不确定它在React-Native上的效果如何。看起来你必须使用非标准的文本和输入才能让它工作，这在on上会更复杂一些。我也在Android 7上测试过，它本机应该支持表情符号，所以这里可能还有其他问题？
如果我让表情符号渲染，
浏览 2提问于2018-01-23得票数 1
我在我的React-Native项目中使用了react-native-text-input-mask库。react-native-text-input-mask是为iOS和安卓上的React-Native添加文本输入掩码的一个很好的库。它在iOS上运行良好，但在安卓上，我看到了affineFormats错误。如何修复此错误？ ? 这是我的代码。 <TextInputMask
style={commonStyles.textInput}
value={phoneNumber}
placeholderTextColor="darkgray"
plac
浏览 40提问于2021-04-29得票数 1
回答已采纳
1回答
如果不使用React Native内置的性能监控工具，我如何测量一段时间内React Native应用程序(iOS和安卓版本)的网络带宽使用情况？
浏览 34提问于2018-09-05得票数 1
2回答
我在Visual 2022中有Xamarin交叉平台应用程序。我有一个主页，我想要两个按钮。
“带我去安卓页面”按钮
“带我去iOS页面”按钮
我希望在此跨平台应用程序的Android中创建一个本机页面示例，并在此应用程序中的iOS项目中创建一个本机页面示例。
当我点击“带我到安卓页面按钮”，它应该带我到本机设计的安卓网页，当我将点击“带我到iOS页面按钮”，然后它应该带我到本机设计的网页在iOS项目。
我希望任何人都能给我任何参考或样本代码，以实现这一目标。
谢谢
浏览 4提问于2021-09-10得票数 0
我已经用react native创建了几个安卓应用程序，我一直喜欢使用ToastAndroid，因为它可以弹出消息，应用程序用户不必通过点击屏幕来关闭它。现在，我想从我的应用程序中创建IOS版本。我想问一下，在ios中，android toast的替代品是什么？
浏览 0提问于2021-11-26得票数 0
我正在构建一个应用程序，我使用swiper，flatlist和React Native Image组件渲染许多图像，但该组件在安卓上加载图像非常快，在iOS上加载图像非常慢，而且在安卓上缓存比ios更好虽然我使用强制缓存道具，有什么方法可以提高ios的图像性能吗?！
浏览 0提问于2017-10-01得票数 4
我最近在PlayStore上发布了一个应用程序，我的React Native "android Only“版本有一个问题，如下所示： A-调试模式下的状态： 该应用程序会在模拟器和真实的android设备上以及在我的localhost之外的其他IP上显示此错误，如我的/etc/hosts中所述： //对象作为React子级无效(found: object with key {$$typeof，type，key，ref，props，_owner}) 只有当我: 1-在"http://localhost:8081/debugger-ui“上运行调试器2-运行"react-
浏览 14提问于2019-03-06得票数 1
回答已采纳
1回答
我已经将我们的应用程序从react-native-firebase迁移到了@react-native-firebase/crashlytics，并设法从安卓获得了崩溃报告，但iOS却没有任何进展。
我做了以下所有的事情：
删除了react-native-fabric及其所有引用
安装@react-native-firebase/app
安装@react-native-firebase/crashlytics
如手册所述，在xCode中添加了xCode
在应用程序的根部添加了firebase.json和crashlytics_debug_enabled: true (这解决了
浏览 3提问于2020-02-17得票数 1
所以我刚开始学习react-native，但我发现同时构建iOS和安卓都需要OS。我使用Ubuntu，但我没有听说或读到过关于Linux编写react-native应用程序的内容。
浏览 12提问于2020-11-30得票数 0
当使用Visual Studio App Center为iOS或安卓构建React Native时，如何使用内部版本号作为应用版本号的一部分？例如: Major.Minor.Build，其中主要和次要由开发团队配置，但Build由应用程序中心提供。
浏览 11提问于2019-11-13得票数 3
回答已采纳
我刚开始在Spring中实现推送通知，如果之前有人问过这个问题，我深表歉意。 我正在开发一个后端Rest API，将用于在React Native中创建的iOS和安卓应用程序。我的问题是，有没有一个库或其他东西可以让发送推送通知变得容易，无论是iOS还是安卓，或者我是不是误解了从后端发送推送通知的方式。 感谢您的宝贵时间！
浏览 12提问于2019-05-15得票数 0
为什么在craete-react-native-app之后我没有文件夹，安卓和ios？
现在我不能用react-native run-android来打开它，也不能把安卓的预演放在上面。怎么啦？
浏览 1提问于2018-08-07得票数 0
回答已采纳
我们正在考虑在我们的应用中使用react-native-svg。我们有点想在应用程序中自由地使用它来创建几乎每个页面的视觉效果，因为它应该比使用图像更好地缩放。我们的目标是安卓和iOS，平板电脑和手机。
在react-native-svg应用程序中大量使用SVG而不是使用PNG图片有意义吗？
浏览 20提问于2020-02-05得票数 0
我已经添加了从我的React-Native应用程序中发起电话呼叫的功能，该应用程序可以在iOS和安卓系统上运行。我使用React-Native提供的链接接口完成此操作，如下所示。
const url = 'tel:5684567854';
Linking.canOpenURL(url).then(supported => {
if (!supported) {
console.log('Can\'t handle url: ' + url);
} else {
return Linking.openURL(url);
浏览 6提问于2018-09-08得票数 0
我使用的是React Native 0.45.1。
对于本地化，我使用了'react-native-i18n‘包(版本2.0.2)。
我想知道如何在iOS和安卓中本地化我显示的应用程序名称。
浏览 0提问于2017-07-20得票数 3
1回答
假设我有一个只有2页的网站。
然后，我创建了一个webview react本机应用程序，它可以很简单，如下所示：
App.js
import React, { Component } from 'react';
import { WebView } from 'react-native';
export default class MyWeb extends Component {
render() {
return (
<WebView
source={{uri: 'http://ex
浏览 0提问于2018-09-14得票数 4
回答已采纳
1回答
我知道安卓有elevation，ios有shadowColor、shadowOffset、shadowOpacity、shadowRadius。但是我想在安卓和ios上得到同样的阴影，但我不能只用elevation来代替安卓。
因此，我测试了包react-native-shadow和react-native-shadow-2，它们不算太糟，但它们有太多的缺省值：
react-native-shadow
老了
不能有子大小
太多的选择都是徒劳的
..。
react-native-shadow-2
支持动态大小(width='100%')。但是Shado
浏览 2提问于2021-07-28得票数 1
我是ReactNative的新手，我创建了一个小小的“hello world”应用。 我没有使用expo，我使用React Native CLI快速入门创建了我的应用程序。 这里有关于如何为安卓和谷歌play商店构建应用程序的非常明确的说明：https://facebook.github.io/react-native/docs/signed-apk-android 我能够遵循这些指导，并且我是成功的。 如何对ios生产版本执行相同的操作？
浏览 25提问于2019-09-27得票数 3
回答已采纳
3回答
我已经搜索了很多次来寻找这个问题的明确答案，但不幸的是，由于我对这两种技术都是新手，我找不到明确的答案。
我将使用PWA技术开发一个跨平台的移动应用程序，我知道我可以使用react，但我想知道是否也可以使用react native，因为它是为移动应用程序设计的，而react是为web应用程序设计的。
我发现这个问题描述了React和react native之间的区别:"React native是react顶部的一个额外的库，用来为iOS和安卓设备制作原生应用。“
使用react native和PWA有冲突吗？
任何建议都将不胜感激。
浏览 0提问于2019-01-26得票数 19
回答已采纳
我正在为我的React Native项目使用react-native-fbsdk。
它在安卓和iOS上运行得很好，因为我遵循了他们官方网站上提到的步骤。
但是，没有用于fbsdk Windows集成的资源。
可以将fbsdk与Windows react原生应用程序集成吗？
浏览 2提问于2016-07-06得票数 2
我试图创建一个反应-本机项目使用反应-本机cli。命令我用来创建项目
npx反应-本机init测试
之后，如果我试图运行这个应用程序
cd测试& npx react本机运行-android
但我知道这个错误：
未找到错误安卓项目。你确定这是一个反应本土项目吗？如果您的Android文件位于非标准位置(例如不在“android”文件夹中)，请考虑将选项设置为指向新位置.。
我有android，ios文件夹在根项目和节点版本是16.15.0
这是我的项目json：
{
"name": "test",
"versio
浏览 10提问于2022-05-14得票数 3
回答已采纳
我希望为React Native应用程序提供一些测试安卓和iOS设备。我看过，但没有专门介绍它的部分。
浏览 0提问于2020-02-07得票数 0
我正在用create-react-app和Electron制作一个桌面应用程序。它需要在Mac、Windows和Linux上运行。我还想为安卓和iOS做一个本地版本。
我可以在React Native中创建一个可以在移动设备和桌面上运行的应用程序吗？这可能会节省很多时间。
浏览 18提问于2018-01-08得票数 56
1回答
我开发了移动应用程序，其中有视频播放器在反应原生。
然后，我从react原生项目构建了Android和iOS应用程序。
但它在安卓上运行得很好，但在iOS上就不行了。
如果你曾经遇到过这个问题，请帮助我。
这是代码和包信息。
<WebView
allowsFullscreenVideo={true}
style={{ aspectRatio: 1.6, backgroundColor: "#000000", flex: 1 }}
source={{ uri: 'https://sample.mp4' }}
浏览 0提问于2020-02-29得票数 1
1回答
我有一个react-native项目，它可以完美地在安卓和iOS上运行，我知道react-native应用程序可以在平台移动和网络上运行。那么，我如何在Web上运行当前的代码，或者如何将当前的移动应用程序转换为web应用程序。
我已经安装了react-dom，react-native-web，但是我没有得到任何成功。
浏览 1提问于2019-08-08得票数 0
有没有人成功地使用react native创建了iOS和Android应用程序，这些应用程序可以用作其他iOS和Android原生项目中的库/子项目，这些项目是在没有使用react native的情况下创建的？我的目标是为既有iOS代码库又有Android代码库的现有应用程序创建新功能，这些代码库是在没有使用react原生开发的情况下开发的。
作为一个简单的例子，让我们想象一下，我需要创建一系列的屏幕和逻辑，以允许用户“创建一个新帐户”。理想情况下，我希望创建新的功能(控制器、视图、api客户端等)。使用react native，然后将其导出为自包含的iOS和安卓应用程序。除了能够独立运行这些
浏览 7提问于2017-07-10得票数 5
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
