2020-06-19 react-native下开发运行Android跟iOS详细步骤

Posted 2023-04-18

参考技术A 首先确保电脑上装了nodejs 环境 androidstudio vscode开发工具 xcode
说明：因为公司项目改了作者的依赖模块，所以这里需要在生成的node_modules文件夹下面替换自己修改的依赖。

第一步:编译进去 yarn生成node_modules目录
第二步:终端进去工程根目录找到node_modules替换其中的
@react-native-community/viewpager。
第三步:可能很多时候，androidstudio编译失败在android目录下的build.gradle文件下配置阿里云的maven地址：
maven url ' http://maven.aliyun.com/nexus/content/groups/public/'
第四步:然后androidstudio点击运行按钮 即可开始调试
第五步：安卓手机运行之后看到效果，这个时候在进入终端执行npm start
之后，摇动手机 最下面有一个setting的选项设置本手机的IP地址:8081端口

第一步：找到工程目录下的node_modules目录下的react/base/目录下替换 RCTModuleMethod.mm文件
第二步：找到项目工程的ios目录下的.xcodeproj文件 以xcode方式打开
第三步：然后在xcode工程下选择对应的iOS的模拟器设备
第四步：模拟器的快捷键是cmmand+R

第一步：使用xcode打开工程下面的.xcodeeproj文件，选择真机调试
如果报错 可能是因为没有添加appID
点击xcode菜单栏目
选择preference选项，然后选择Accounts选择+号 选择apple ID选项
选择所用的苹果的apple iD账号登陆调试即可 （一般要接收手机验证码）

React-native：如何在 React-native 中使用（和翻译）带有 jsx 的 typescript .tsx 文件？

【中文标题】React-native：如何在 React-native 中使用（和翻译）带有 jsx 的 typescript .tsx 文件？

【英文标题】：React-native: How to use (and translate) typescript .tsx files with jsx in React-native?

【发布时间】：2017-04-27 13:33:20

【问题描述】：

我是来自 reactjs+typescript 的 React-native 新手。我正在尝试建立一个相当简单的项目测试，看看这项技术是如何工作的。我正在使用 VS 代码。

按照基本教程，我已经设置了我的项目，我可以在 Visual Studio Android 模拟器中运行它。

现在我想看看如何创建一个自定义的 .tsx 文件（比如 profile.tsx），编写一个渲染函数并将其显示在索引页面（index.android.js）上。

所以我创建了一个.tsx文件：（我已经省略了文件开头的各种导入语句）

export class Profile extend React.Component 

       render()
           return <View> this is the profile view </View>
       

使用 VS Code 我可以编译这个文件并生成它对应的 profile.js 和 profile.js.map 文件。

profile.js 的内容是：

"use strict";
const react_1 = require('react');
const react_native_1 = require('react-native');

...

class Profile extent react_1.Component 

     render()
          return react_1.default.createElement(react_native_1.View, null, "this is the profile view");
     

在运行时，react_1.default.createElement 行会出现以下消息：

undefine 不是对象（评估 react_1.default.createElement）

有这个“默认”属性，我不知道它是什么。

那么如何创建一个包含一些 jsx 代码的 .tsx 文件并正确地转译它以便在 react-native 应用程序中正确使用？

P.S: 这是我的 tsconfig.json 文件，我已经用

jsx="react"

启用了 jsx

任何帮助、建议、指导将不胜感激。 谢谢。

【问题讨论】：

您在extend 和extent 中有拼写错误。这是故意的还是应该是extends？

【参考方案1】：

现在 TSC 正在转译 ES6 模块语法，后来的 JavaScript 引擎期待默认导出（类似于 module.exports），但它不存在。您应该使用 ES6 目标和模块配置您的 TSC。

尝试更新tsconfig.json 文件中的编译器选项，如下所示：

  "compilerOptions": 
    "target": "es6",
    "allowJs": true,
    "jsx": "react",
    "sourceMap": true,
    "noImplicitAny": false
  

使用ES6 目标（模块默认为ES6），您的Profile 类应转译为：

class Profile extends Component 

     render()
          return React.createElement(View, null, "this is the profile view");
     

还记得安装 react 和 react-native 类型定义，使用 yarn（首选最新的 react-native）或 npm：yarn add @types/react-native @types/react -D 或 npm i @types/react-native @types/react -D

【讨论】：

非常感谢。有效！我将此标记为答案。

【参考方案2】：

通过避免导入组件和使用 * 例如解决了这个问题。 "从 "react" 导入 * 作为 React；"

这个问题也可能来自使用 tsc 编译的 JS。