为了账号安全,请及时绑定邮箱和手机立即绑定

怎样解决React native iOS 如下错误?

/ 猿问

怎样解决React native iOS 如下错误?

犯罪嫌疑人X 2019-08-21 18:14:54

怎样解决React native iOS 如下错误


查看完整描述

3 回答

?
炎炎设计

首先使用react native编写一个简单的应用,在碰到问题的时候,肯定需要对代码进行调试。目前react native支持在Chrome浏览器内进行调试。需要选择Scheme->Run的选项为Debug,否则模拟器中不会出现调试选项。
将应用设置为在模拟器中运行,运行后,按键Command+D,弹出调试菜单选项,选择Debug in Chrome。目前的版本只支持Chrome进行调试,后续可能会支持Safari进行调试。调试过程就跟平常写前端调试js代码一样,可以加断点,打日志进行调试。
有些情况下,Chrome浏览器不起作用,可能是因为其他应用插件的原因,这个时候需要将其他插件禁用,以进行react native代码的调试。
如果要需要在真机上运行,需要将jsCodeLocation中地址改为本机的ip地址,比如192.168.1.x之类的,这样就可以在真机上运行,但是还是不能发布到appstore上面去。发布的时候,需要将该代码注释
jsCodeLocation = [NSURL URLWithString:@"http:// localhost:8081/index.ios.bundle"];
,反注释这一行代码:
jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
这样,该应用就可以一直在真机上运行,而不依靠开发环境的支持了。
发布的时候,还要记得选择release版本,这样调试菜单才不会出现。

查看完整回答
反对 回复 2019-08-24
?
FFIVE

1修改URL地址:打开项目目录下的AppDelegate.m文件,
修改里面的URL,把localhost改为你的电脑的IP。在Mac系统下,你可以在系统设置/网络里找到电脑的IP地址。

2选择设备:把手机插上数据线,连接到你的电脑,这时候就可以在调试设备里,看到你自己的设备。

3点击当前选中的模拟设备即可展示所有设备,如下图,然后选中你的真机

4解决账号问题:点击“Build and Run”,却出现如下提示:
Failed to code sign “2048”.
No provisioning profiles with a valid signing identity (i.e. certificate and private key pair) matching the bundle identifier “com.facebook.8048” were found.
Xcode can attempt to fix this issue. This will reset your code signing and provisioning settings to recommended values and resolve issues with signing identities and provisioning profiles.

没有提供一个合法的证书?xcode还是很人性化的,直接有个按钮Fix Issue,点击它,然后提示输入账号密码:

选择choose

ok,看起来问题已经fix了,再次点击run,先看到“Build Succeded”,激动,成功了!

然后过又出来一个提示,这又是什么鬼!
Could not launch “2048”
process lanch failed: Security

导出证书:google了一番,后来发现是因为没有导入证书,打开Xcode-preferences-Accounts,可以看到这里有自己的Apple ID, 其实前面“Fix issue”干的事情,就是在这里添加了自己的私人账号。

选中自己的账号,然后点击“Export Developer Accounts”

输入证书的密码,记下来,待会儿会用到。

ok,导出成功了

导入证书:在桌面找到导出的文件

双击打开,提示输入密码, 密码就是前面你输入的密码

提示导入成功,看起来可以了!

再次点击run,WTF,怎么还是这个提示

设备信任证书:原来导入证书之后,还需要在手机里点击信任,打开设置-通用-描述文件与设备管理

查看完整回答
反对 回复 2019-08-24
?
缥缈止盈

React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发
iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件,代替 DOM 元素来渲染等。

React Native 使你能够使用基于 JavaScript 和 React
一致的开发体验在本地平台上构建世界一流的应用程序体验。React Native
把重点放在所有开发人员关心的平台的开发效率上——开发者只需学习一种语言就能轻易为任何平台高效地编写代码。Facebook
在多个应用程序产品中使用了 React Native,并将继续为 React Native 投资。

其好处显而易见:减少了人力、节省了时间、避免了 iOS 与 Android 版本发布的时间差,开发新功能可以更迅速。

下面,我们可以尝试用React Native创建一个 iOS APP.

在我们开始之前,我建议:你可以在 Github
里先下载 React Native 的代码框架。里面还有一些示例项目,2048 的游戏, Movies(一个看电影的
APP),SampleApp, TicTacToe (一款游戏)和 UIExplorer(能显示出所有用 React Native
替代的控件,如ListView,TabBar,MapView, Slider)),对于学习用如何用 React Native 创建
UI,这些都是非常好的例子,尤其是 UIExplorer APP,它几乎用到了每一个您的 APP 中需要创建的 UI 控件。

首先,我们先来安装相应的工具。React native 是使用 Node.js 来 创建 JavaScript 代码。如果你已经在你电脑上安装上了这些工具,你可以跳过下面这几步。

推荐使用 Homebrew的方式来安装 nvm,watchman 和 flow。

在Mac下,如果用homebrew,那么只用一行就可以装好:
brew install node

接下来安装watchman
brew install watchman

watchman是Facebook的一个文件观察者。React Native 用它来检测代码的变化.

接下来安装 npm
npm install -g react-native-cli

nmp 是 node的一个三方管理工具,相当于 Ruby中的RubyGems,iOS中的 CocoaPods,Java中的 Gradle/Maven,基本上,它使您能够轻松下载和管理你的项目需要的任何依赖库。

在终端,找到你希望保存的项目文件,然后运行下面的文件夹。
react-native init BookSearch

以上使用 CLI 工具来构建一个 Native 项目,是准备建立并运行原样。当这个过程完成后,你就会在终端窗口中打开 Xcode
的BookSearch.xcodeproj
并运行应用程序像往常一样。做到这一点,模拟器将启动您的应用程序的运行。一个终端窗口也将打开。当一个Native应用程序启动时,它加载从以下网址
JavaScript 的应用程序。

?
终端被打开,服务器开始作出反应来处理上述请求。该 Native 负责读取和建设 JSX(我们将看看这个版本)和 JavaScript 代码。

运行这个 APP,你可以看到下图中的模拟器,如果你想在开发运行有几个步骤,你应该这样做。

欢迎屏幕给出了一些关键的指令,你应该注意:编辑应用程序的用户界面,你应该修改,当你创建项目时生成的 index.ios.js 文件,如果您更改
JavaScript 代码,重新加载命令应用程序 Command-R 看到的变化,如果你想要更多的选择,使用命令控制
Command-Control-Z 打开开发者菜单,提供了这样的选项,使现场重新加载和浏览器的调试。

在任何时候做本教程时你可能会遇到一个红色屏幕模拟器,可以检查错误消息。它能让你知道这个问题是与你的代码还是服务器有关系。当我接收到错误的消
息「无法连接到服务器」 在模拟器和检查终端有一个「流程终止」 错误消息时我陷入了服务器连接问题。当这种情况发生时,关闭终端窗口,停止在
Xcode
中的应用并再次运行它。对于其他错误,是由于语法错误代码中或网络请求超时时(如果你的应用从互联网上获取数据),一个简单的重新加载后修复这个问题应该
怎么做。

如果你在敦促 Command-R 键盘但什么都没有发生,硬件键盘可能没有连接到模拟器上。选择模拟器上的选项菜单以连接它:Hardware > Keyboard > Connect Hardware Keyboard.

如果你按上边程序做了它依然不能重新加载,那么你可能需要重启你的电脑。我遇到过一次突然死机,重启电脑可以完成加载。

我们现在开始构建应用程序,打开 index.ios.js 文件。我建议使用适合 web 开发的 IDE。你还可以使用
Xcode,但你会发现它并不适合因为在代码格式化、自动完成和语法错误突出显示时它不是非常灵活。你可以通过学习本文来决定并选择合适的
JavaScript IDE。我用过 RudbyMine,但实际上任何 IDE 都支持 JavaScript。如果你能得到一个支持 JSX
的那真很不错。

当你打开 indx.ios.js 文件,你就会看到正在运行的应用程序构建 UI 的代码。你可能看到以下代码块。
'use strict'

以上代码启用了严格的模式,增加了处理原生 JavaScript 代码对错误的改善。
var React = require('react-native');

以上代码可以加载 react-native 模块,并将它赋予变量的反应。在你调用任何模块之前你需要把外部模块加载到你的文件中来。可以把它作为Swift 和 Objective-C 的导入库。
var { AppRegistry, StyleSheet, Text,
View,
} = React;

上面是一个解构赋值,你可以通过它将多个对象属性分配给一个变量。这能让他们在文件作用域被引用。以上是可选择的,但如果你不用它,那么每次你使用
一个组件在你代码中时,你就必须使用完全限定的名称,例如:「React.AppRegistry」而不能只用「AppRegistry」
、「React.StyleSheet」 而不能用「StyleSheet」 等等。
var BookSearch = React.createClass({
render: function() {
return (

Welcome to React Native!

To get started, edit index.ios.js

Press Cmd+R to reload,{'\n'}
Cmd+Control+Z for dev menu

);
}
});

上面创建一个类只有一个渲染 () 函数。在渲染函数中无论什么被定义都是将输出到屏幕上。上述使用
JSX(JavaScript语法扩展)来构建应用程序的 UI。如果您以前使用过 XML(甚至HTML),JSX
就会记住并熟悉你。它具有相同的均衡功能来打开和关闭标签并使用属性来设置值标签。你不需要使用 JSX 本地反应,你可以使用纯
JavaScript,但 JSX 建议它的简单定义树结构。如果你有很多 UI 的代码,通过大型的 JSX 树结构将更容易阅读理解。
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});

上面的样式应用可于视图的内容。如果你做过 web 开发或用过 CSS(层叠样式表),在此之前这应该是熟悉的。React Native 使用
CSS 样式应用程序的UI。如果你看看 JSX 代码,你会看到不同风格的代码被用在不同的地方。例如:
style={style.container}设置样式定义容器的外部视图包含其他UI组件。

上面的样式应用可于视图的内容。如果你做过 web 开发或用过 CSS(层叠样式表),在此之前这应该是熟悉的。React Native 使用
CSS 样式应用程序的 UI。如果你看看 JSX 代码,你会看到不同风格的代码被用在不同的地方。例如:
style={style.container}设置样式定义容器的外部视图包含其他 UI 组件。



查看完整回答
反对 回复 2019-08-24

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信