Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

react-native搭建运行 #2

Open
haoxinxin opened this issue Jun 2, 2017 · 0 comments
Open

react-native搭建运行 #2

haoxinxin opened this issue Jun 2, 2017 · 0 comments

Comments

@haoxinxin
Copy link
Owner

haoxinxin commented Jun 2, 2017

搭建启动:

  • 按照https://reactnative.cn/docs/0.44/getting-started.html#content安装好各种
  • 在终端执行,#react-native init App(你的app的名字),init结束后,在Android-Studio中打开其中的android文件夹,会自动初始化,并打开编辑界面。在android/app/src/main/java/com/awesomeproject/MainActivity.java 执行该文件run。执行成功时会启动一个模拟器(emulator)。
  • 模拟器启动完毕,在终端#cd App , #react-native run-android 即可运行App。

编写前端代码

编写相应的index.android.js或index.ios.js可在模拟器实时查看编写效果。
刷新看效果:按两下r
开启自动刷新:打开模拟器的App内的开发菜单:Command+m,选择“Enable Hot Reload”

真机设备上运行,以android为例:

  • 用usb连接手机,并打开USB调试开关。

  • android5.0及以上,运行,#adb reverse tcp:8081 tcp:8081

  • android5.0以下,首先确认手机和电脑在同一wifi环境,在电脑上运行 #react-native run-android,会看到红屏错误提示。

    摇晃手机,点击’Dev Settings’->点击’Debug server host for device’, 输入电脑的IP和端口(8081)。回到开发者菜单,reload。

  • 此时可以在电脑上行修改代码,摇晃手机,点击’reload’以实时查看下效果。

打包apk

  • 生成私有秘钥
    #keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000, 注意记住你执行该命令过程中设置的密码。
  • 把my-release-key.keystore文件放到你工程中的android/app文件夹下。
  • 编辑~/.gradle/gradle.properties(没有这个文件你就创建一个),添加如下的代码(注意把其中的****替换为相应密码)
     MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
     MYAPP_RELEASE_KEY_ALIAS=my-key-alias
     MYAPP_RELEASE_STORE_PASSWORD=*****
     MYAPP_RELEASE_KEY_PASSWORD=*****
  • 编辑项目目录android/app/build.gradle,添加如下签名配置:
 android {
    ...
    defaultConfig { ... }
    signingConfigs {
        release {
            storeFile file(MYAPP_RELEASE_STORE_FILE)
            storePassword MYAPP_RELEASE_STORE_PASSWORD
            keyAlias MYAPP_RELEASE_KEY_ALIAS
            keyPassword MYAPP_RELEASE_KEY_PASSWORD
        }
    }
    buildTypes {
        release {
            ...
            signingConfig signingConfigs.release
        }
    }
}
  • 执行 #cd android && ./gradlew assembleRelease,生成的APK文件位于android/app/build/outputs/apk/app-release.apk,它已经可以用来发布了。
  • 在手机设备上安装:USB连接手机设备情况下,执行 #cd android && ./gradlew installRelease

升级

安装react-native-git-upgrade工具模块:
$ npm install -g react-native-git-upgrade
运行安装命令:
$ react-native-git-upgrade

$ react-native-git-upgrade X.Y.Z(版本号)

@haoxinxin haoxinxin changed the title react-native react-native搭建运行 Jun 21, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant