`

[React Native]初步安装指引

阅读更多

1.根据社区教程配置好:

https://reactnative.cn/docs/0.51/getting-started.html#content

 

(如果中途出现一些权限问题可以sudo再执行命令)

 

2.Build IOS & Android app:

根据中文社区的指引,可以顺利搭建完MAC的开发环境。需要安装homebrew。
通过控制台init成项目后,项目目录下就自动生成两个app的项目文件(Android & ios)
Android项目需要根据指引,配置一系列系统环境变量。配置完成后,先打开模拟器,再在控制台run项目,可以成功运行。
ios比android简单,直接run项目即可,自动调起模拟器。
如果需要原生和RN混编,只需要在相应IDE内打开项目即可。
 
3.项目结构:
package.json是依赖包管理文件,类似gradle;
node_modules是react native核心libs;
index.js是项目入口,可以修改
import App from './App';
 来控制入口页面;
 
4使用gitup作为mac上的git管理工具:
现象:不知道什么原因,clone下来后出现更改了js文件但是页面怎么刷新都没有显示,重新启动node server会报没有jsbundle的错误.后来先commit一次修改了的文件,之后又可以实时刷新了.
后来发现,如果使用react-native run-ios来运行,会出现文件没完全解释完就执行的情况,会出现上面的现象.如果通过xcode来启动就没有这种问题.
或者先npm start启动node server然后在运行react-native run-ios
 
5.路径:
若在index.js里面入口在第二级目录require('./js/StackController')
则在StackController页面里面,import同级页面只需要import HomeScreen from './HomeScreen';
如果想要上一级页面则需要import {name as appName} from '../app.json', 两个点
分享到:
评论

相关推荐

    React Native Debugger reactnative可视化调试工具

    React Native Debugger是一款强大的开发工具,特别为在macOS平台上进行React和React Native应用的可视化调试而设计。它提供了丰富的功能,使开发者能够更有效地检查、调试和优化代码,尤其是在处理复杂的Redux状态...

    React Native By Example

    React Native By Example by Richard Kho English | 24 Apr. 2017 | ASIN: B01M31KB4Q | 414 Pages | AZW3 | 4.46 MB Key Features Work on native APIs and UI Elements using React Native Get the best of both...

    React Native安装必备

    React Native安装必备是针对想要从事跨平台移动应用开发的开发者们的重要步骤,它结合了多种工具,以便在Android和iOS平台上构建原生应用。在这个压缩包中,包含了以下几个关键组件: 1. **Git**: Git是一种分布式...

    React Native安装步骤

    本文将详细介绍如何在Windows系统上安装React Native的开发环境。 首先,我们需要进行环境配置。安装Chocolatey,这是一个包管理器,可以帮助我们简化软件安装过程。在管理员权限的命令提示符中输入以下命令来安装...

    reactnativepage一个简单的reactnative分页组件

    要使用React Native Page,首先你需要确保已经安装了React Native环境,并熟悉基本的React Native开发流程。然后,通过npm或yarn将这个组件添加到你的项目中: ```bash npm install react-native-page # 或者 yarn ...

    Android和ReactNative混合开发Demo

    本教程通过"Android和React Native混合开发Demo",将详细介绍如何在Android应用中集成React Native,实现原生代码与React Native组件之间的双向通信。 首先,Android原生加载RN页面是混合开发的基础。这涉及到在...

    react native uwp app

    1. **环境配置**:安装Node.js,设置React Native命令行工具,配置Visual Studio和Windows SDK,确保UWP开发环境准备就绪。 2. **创建项目**:使用`react-native init`命令创建一个新的React Native项目,然后根据...

    reactNative之Webview与h5互调

    在React Native中,引入`<WebView>`组件,首先需要安装`react-native-webview`库。在项目根目录下执行以下命令: ```bash npm install react-native-webview --save ``` 然后在组件中引入并使用`<WebView>`: ```...

    react native 技术分享

    搭建React Native开发环境需要安装Node.js和npm(Node.js的包管理器),接着是React Native的开发工具。在安装React Native之前,确保已经安装了Node.js。可以通过访问***下载Node.js,并通过命令行输入node -v和npm...

    东方耀手把手教React Native实战开发

    第2课2、手把手教React Native实战之从React到RN 第3课3、手把手教React Native实战之flexbox布局(RN基础) 第4讲4、手把手教React Native实战之flexbox布局(伸缩属性) 第5讲5、手把手教React Native实战之盒子模型...

    ReactNative开发实例带你入门reactnative开发

    这个“ReactNative开发实例带你入门reactnative开发”的资源,显然是一个针对初学者的教程,旨在帮助他们理解并掌握React Native的基本概念、架构以及实际开发流程。 React Native的核心理念是“Learn Once, Write ...

    EXPO XDE ReactNative For windows

    安装这个软件后,开发者可以在Windows操作系统上运行Expo XDE,开始创建和管理React Native项目。安装过程中,按照提示步骤操作即可,确保系统满足必要的依赖和环境要求。 总的来说,Expo XDE结合React Native,为...

    适用于 Android 和 iOS 的 React Native NFC 模块 react-native-nfc

    为 React Native 带来 NFC 功能。灵感来自phonegap-nfc和react-native-ble-manager 该库最简单(也是最常见)的用例是读取NFC包含 的标签NDEF,可以通过以下代码实现: import React from 'react'; import {View, ...

    一个基于reactnative开发的完整项目示例

    3. **安装与设置**:在开始项目之前,开发者需要确保已安装Node.js、npm和React Native CLI。然后通过命令行工具运行`npx react-native init ProjectName`初始化一个新的React Native项目,或克隆`RNExampleApp-...

    react-ReactNative小书是一本关于ReactNative的入门向的开源书籍

    开始学习React Native之前,需要安装Node.js、npm、Watchman、Flow(可选)、Xcode(针对iOS)和Android Studio(针对Android)。书中会提供详细的步骤指导,帮助读者配置开发环境。 3. **创建第一个React Native...

    ReactNative下的科大讯飞语音库可以进行语音识别与语音合成

    1. 安装库:使用`npm`或`yarn`安装React Native的科大讯飞插件,如`react-native-speech-iflytek`,这个库可能对应压缩包中的`zphhhhh-react-native-speech-iflytek-40b568b`。 2. 配置权限:在Android和iOS的原生...

    react expo开发 react native项目集成方法

    我们学习了如何将 Web App 根目录下的文件拷贝到 React Native App 根目录下,安装依赖项,配置 Babel,配置 App.js,并启动 APP 进行加载分析。使用 React Expo,我们可以快速构建跨平台应用,并将 Expo 项目集成到...

    react-native-viewpager-React Native版本的ViewPager控件,自动播放,无限循环。.zip

    项目地址:https://github.com/race604/react-native-viewpager 效果图:使用说明: 运行 npm 安装 react-native-viewpager --save代码如下:var ViewPager = require('react-native-viewpager');  ...

    react native 实现水波纹效果

    react native 实现水波纹效果,效果非常棒哦

Global site tag (gtag.js) - Google Analytics