精华内容
参与话题
问答
  • React Native 环境搭建

    千次阅读 2018-06-01 10:35:54
    React Native是Facebook开源的跨平台...下面将详细介绍在开发前如何进行环境搭建。一、安装ChocolateyChocolatey是Windows上的包管理器,使用chocolatey安装软件需要以管理员的身份来运行命令提示符窗口。命令:@pow...

    React Native是Facebook开源的跨平台的移动应用开发框架,目前支持Android与IOS两大平台,主要使用JavaScript语言来开发移动应用,有效的大大提高了多平台的开发效率。下面将详细介绍在开发前如何进行环境搭建。


    一、安装Chocolatey

    Chocolatey是Windows上的包管理器,使用chocolatey安装软件需要以管理员的身份来运行命令提示符窗口。

    命令:

    @powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

    Tips:若安装不成功可能是网络的原因,请使用稳定的翻墙软件工具。

     安装成功:




    二、安装Python2

    使用已经安装的chocolatey来安装python2.

     

    Tips:目前不支持python3版本。


    命令:

    choco install python2

    安装成功:




    三、安装Node

    使用已经安装的chocolatey来安装NodeJS.

    命令:

    choco install nodejs.install

    安装成功:





    四、安装React Native命令行工具

    命令:

    npm install -g react-native-cli

    安装成功:





    四、安装Android studio

    安装教程:http://ask.android-studio.org/?/article/9

     

    Tips

    1.      React Native目前需要Android studio2.0或更高的版本

    2.      需要安装jdk1.8版本






    Good luck!

    Write by Jimmy.li








    展开全文
  • ReactNative环境搭建

    2020-11-07 14:33:25
    安装要求 安装步骤请参考官网getting-start(不懂的要学-。-) Node - v14.5.0 Npm - v6.14.5 JDK - v1.8 CocoaPods - v1.9.3 Xcode - v11.3.1 ...npx react-native start npm run start 启动metr

    安装要求

    安装步骤请参考官网getting-start(不懂的要学-。-)

    命令

    通用命令

    原始命令 快捷命令 描述
    npx react-native start npm run start 启动metro
    - npm run lint 代码格式检测
    react-devtools - 打开桌面版devtools查看Component布局

    iOS命令

    原始命令 快捷命令 描述
    npx react-native run-ios npm run ios build&run
    npx react-native log-ios - 打开log
    组合键command + D - 打开虚拟机的DEV菜单
    - 用力摇晃手机 打开真机的DEV菜单
    - npm run bundle-ios jsBundle打包

    Android命令

    原始命令 快捷命令 描述
    npx react-native run-android npm run android 启动metro
    npx react-native log-android - 打开log
    组合键command + M - 打开虚拟机的DEV菜单
    adb shell input keyevent 82 - 打开APP的DEV菜单
    - npm run bundle-android jsBundle打包
    cd android && ./gradlew clean - 清除工程目录下的build文件夹
    - 用力摇晃手机 打开真机的DEV菜单
    adb -s [device_num] install [apk_path] - 命令行安装apk

    注意事项

    • Homebrew下载时卡在Updating Homebrew的解决方案
    • node包管理工具统一使用yarn,不要用npm、cnpm
    • 更换yarn镜像源
    • Android开发需要科学上网
    • iOS有些lib下载速度较慢,但本地环境下载一次即可,耐心等待0.0
    • 安装第三方lib时,请在package.json中固定依赖版本号,不要使用‘~’或者‘^’
    • iOS:PodFile中需要固定版本

    运行步骤

    通用

    1. yarn install

    Android

    1. npm run start
    2. npm run android

    iOS

    1. cd ios && pod install
    2. npm run build:ios
    3. npm run ios

    调试

    1. 选中iOS模拟器,按快捷键command + D打开调试窗口,选择Debug可以打开chrome debugger-ui。

    手动打包

    目前为本地环境打包,希望后面集成自动化打包/部署

    Android

    1. npm run bundle-android
    2. cd android && ./gradlew assembleDebug
    3. cd android && ./gradlew assembleRelease

    Android

    1. 待补充

    参考链接:

    React Native 中文网

    React Native Directory

    示例指引

    同学们可将自己觉得有用的知识点写在这里供大家参考

    • box-shadow 在RN中的写法

    CSS:

    box-shadow:0px 2px 16px 0px rgba(0,0,0,0.08);

    RN:

    shadowColor:'#000000',
        shadowOffset:{
            width:0,
            height:2
        },
        shadowOpacity:0.08,
        shadowRadius:16,
    

    android上外阴影用elivation

    引入第三方组件,优化安卓阴影效果

    import {BoxShadow} from 'react-native-shadow';
    const shadowOpt = {
        width: getPixel(343), //包裹的子内容多宽这里必须多宽
        height: getPixel(192), //同上
        color: '#000000', //阴影颜色
        border: 16, //阴影宽度
        radius: getPixel(16), //包裹的子元素圆角多少这里必须是多少
        opacity: 0.03, //透明度 (注意:经琪琪与萌老师确认过这个效果 与蓝湖给出8%的效果是几乎一致的)
        x: 0,
        y: 2,
        style: {marginVertical: getPixel(10)},
      };
    <BoxShadow setting={shadowOpt}>
    </BoxShadow>
    

    eg:

    import LinearGradient from 'react-native-linear-gradient';
    <LinearGradient colors={['rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, .5)']}  style={styles.container}>
        <Text> 这里是渐变色 </Text>
    </LinearGradient>
    
    • pod install时出现 Error installing libwebp
    1. 原因:libwebp的地址不可用
    2. 解决方案:修改本地cocopods的Spec仓库
    3. 注意:修改CDN仓库(trunk)的Spec即可 一般是/Users/yourname/.cocoapods/repos/trunk/Specs/1/9/2/libwebp/1.1.0/
    • Xcode build/run/archive时出现 ld: library not found

    eg:ld: library not found for -lRNFastImage

    1. 原因:yarn add (/npm i) react-native-fast-image && npx pod-install后,因react-native-fast-image的不明bug使得link不彻底 or Xcode bug, 导致Xcode无法找到RNFastImage这个库
    2. 解决:Xcode->Build Settings->Library Search Paths里,对Debug和Release的列表增加Link路径 “${PODS_CONFIGURATION_BUILD_DIR}/RNFastImage”
    3. 注意:对Debug和Release的列表里都要增加路径,否则会给打release包的人留坑了。
    展开全文
  • React Native环境搭建

    2019-02-18 11:20:19
    搭建ReactNative开发环境所需软件 Node.js 4.0及以上版本。 Mac系统下Xcode 6.4以上,Java环境和Android环境 Mac系统下建议安装Homebrew,以及Watchman和Flow等工具。 Mac环境搭建ReactNative 安装Node.js 从...

    搭建ReactNative开发环境所需软件

    • Node.js 4.0及以上版本。
    • Mac系统下Xcode 6.4以上,Java环境和Android环境
    • Mac系统下建议安装Homebrew,以及Watchman和Flow等工具。

    Mac环境下搭建ReactNative

    安装Node.js

    从官网https://nodejs.org/en/ 下载Node.js,建议设置npm镜像加速。
    npm安装命令:

    npm config set registry https://registry.npm.taobao.org --global
    npm config set disturl https://npm.taobao.org/dist --global
    

    安装完成后,输入node -v,输出版本号,显示成功,如下:
    在这里插入图片描述

    安装npm

    npm 是一个包管理工具,用来管理React中依赖的包,可以理解为一个项目结构的管理工具。
    安装命令如下:

    npm install -g react-Native-cli
    

    如果已经安装过,使用下面的命令升级:

    npm install npm@latest -g
    

    安装Homebrew

    ReactNative包管理器同事使用了node和watchman环境,所以上面的软件还可以使用Homebrew安装,命令如下:

    brew install node
    brew install flow
    

    安装Watchman

    Watchman是Facebook提供的监视文件系统变更的工具,安装命令如下:

    brew install watchman
    

    至此,ReactNative的基础环境就搭建好了

    展开全文
  • react native 环境搭建

    2016-09-09 17:31:17
    去年Facebook推出React Native,其宣言是write once, use anywhere。能实现安卓,iOS公用一套代码,轻松实现热更新,听起来还挺爽的,其实坑还是很多在学习中,不过目前版本才0.32,但相信Facebook强大的实力,RN会...

    去年Facebook推出React Native,其宣言是write once, use anywhere。能实现安卓,iOS公用一套代码,轻松实现热更新,听起来还挺爽的,其实坑还是很多在学习中,不过目前版本才0.32,但相信Facebook强大的实力,RN会越来越成熟。

    学习RN有一段时间,最近做一个总结(zhuang b),开始写博客,分享给广大码农。会陆续更新,欢迎私信骚扰。

    废话不多说了,下面简单的列出步骤吧。 

    1. 安装Homebrew 
     Mac系统的包管理器 ,Homebrew主要用于安装后面需要安装的watchman、flow 
    打开MAC的终端,输入如下命令: 
    ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 

    
    

    译注:在Max OS X 10.11(El Capitan)版本中,homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复:

    sudo chown -R `whoami` /usr/local

    2. 安装nvm和nodejs 

    nvm是用于nodejs版本管理的工具,用于安装nodejs。 
    对于nvm应该可以使用brew直接安装,但是我没有用这个安装,读者可以自己使用如下命令试试: 

    brew install nvm 

    我使用的另一种方式,在终端中输入如下的命令: 

    curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.26.1/install.sh | bash 

    这个命令按照官方的说明,应该会自动配置好环境,能够在任何的终端中使用nvm命令,但是我安装完了事不可以的。需要做额外的工作,需要在~/.bashrc, ~/.profile, ~/.zshrc文件中(如果没有自己创建),添加如下的一行语句: 

    . ~/.nvm/nvm.sh 

    这样就能够在任意的终端中使用nvm命令了。 
    然后执行如下的命令: 

    nvm install node && nvm alias default node 

    这个用于安装nodejs和npm。npm用于nodejs包依赖管理的工具。 
    3. 安装watchman 
    watchman是用于监听文件变化的工具,应该是用于监听文件变化,然后界面做出响应。执行如下命令: 

    brew install watchman 

    4. 安装flow 
    flow我个人理解的是用于静态分析js语法错误的工具,能够更早的js的语法错误。执行如下的命令: 

    brew install flow 

    到这里基本的环境就配置好了,下面创建一个iOS的例子,在终端中将目录切换到你保存工程的目录,然后执行如下的命令:

    <span style="font-family: "microsoft yahei"; line-height: 26px; background-color: rgb(255, 255, 255);"></span><pre style="box-sizing: border-box; overflow: auto; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; padding: 9.5px; margin-top: 0px; margin-bottom: 10px; line-height: 1.42857; word-break: break-all; word-wrap: break-word; color: rgb(51, 51, 51); border-width: 0px 0px 0px 4px; border-left-style: solid; border-left-color: rgb(5, 165, 209); border-radius: 4px; background-color: rgba(5, 165, 209, 0.0470588);"><code style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size:undefined; color: inherit; border-radius: 0px; padding: 0px; white-space: pre-wrap; background-color: transparent;">react-<span class="hljs-keyword" style="box-sizing: border-box; color: rgb(0, 0, 255);">native</span> init YourProjectName</code>

    
    
    <span style="font-family: "microsoft yahei"; line-height: 26px; background-color: rgb(255, 255, 255);">第二个命令第一次执行会执行很长时间,因为需要安装许多东西。然后再终端输入如下命令打开工程:或者直接手动打开工程</span>
    <span style="line-height: 1.45;"></span>
    react-native run-ios

    下面试着修改index.ios.js中的文本,然后在模拟器上按Cmd+R,这样能够看到修改马上就呈现到模拟器上了。

    尝鲜就到此为止了,以后还得努力学习React Native,期待以后的文章吧。

    展开全文
  • react native环境搭建

    2015-11-12 23:23:21
    1. 安装HomeBrew(http://brew.sh/index_zh-cn.html) $ ruby -e “$(curl –fsSL https://raw.gihubusercontent.com/Homebrew/install/master/install)” 2. 安装Node.js  3. 通过brew装watchman。...
  • React native环境搭建

    2017-08-15 22:09:08
    最近公司项目做了两款多开版微信的及时聊天系统,项目中使用到了vue.js 感觉这种... 首先我们来看环境搭建: 安装 必需的软件 Chocolatey Chocolatey是一个Windows上的包管理器,类似于linux上的yum和 ap
  • reactnative环境搭建

    2018-03-12 14:30:38
    https://reactnative.cn/docs/0.51/getting-started.html#content 1、安装Chocolatey:执行下面命令 打开cmd ,输入下面的命令 @powershell -NoProfile -ExecutionPolicy Bypass -Command "i...
  • ReactNative 环境搭建

    2016-07-20 16:57:21

空空如也

1 2 3 4 5 ... 20
收藏数 2,265
精华内容 906
关键字:

reactnative环境搭建