非常教程

React native参考手册

指南(Android) | Guides (Android)

Building React Native from source

需要本机代码的项目

此页面仅适用于react-native init使用Create React Native App 制作的或使用此类应用程序弹出的项目。有关弹出的更多信息,请参阅创建React Native App存储库的指南。

如果您想要开发新的功能/错误修复程序,尝试使用尚未发布的最新功能,或者使用无法合并到核心的修补程序维护自己的分支,则需要从源代码构建React Native。

先决条件

假设您已安装Android SDK,请运行android以打开Android SDK管理器。

确保你已经安装了以下软件:

  • Android SDK版本23(compileSdkVersion中build.gradle
  • SDK构建工具版本23.0.1(buildToolsVersion in build.gradle
  • Android支持库> = 17(Android支持库)
  • Android NDK(下面的下载链接和安装说明)

点Gradle到你的Android SDK:

第1步:通过本地shell设置环境变量。

注意:文件可能因壳味而异。请参阅下面的常见外壳示例。

  • bash: .bash_profile or .bashrc
  • zsh: .zprofile or .zshrc
  • ksh: .profile or $ENV

例:

export ANDROID_SDK=/Users/your_unix_name/android-sdk-macosx
export ANDROID_NDK=/Users/your_unix_name/android-ndk/android-ndk-r10e

第2步:使用以下内容在react-native应用程序local.propertiesandroid目录中创建一个文件:

例:

sdk.dir=/Users/your_unix_name/android-sdk-macosx
ndk.dir=/Users/your_unix_name/android-ndk/android-ndk-r10e

下载Android NDK的链接

  • Mac OS (64-bit) - http://dl.google.com/android/repository/android-ndk-r10e-darwin-x86_64.zip
  • Linux (64-bit) - http://dl.google.com/android/repository/android-ndk-r10e-linux-x86_64.zip
  • Windows (64-bit) - http://dl.google.com/android/repository/android-ndk-r10e-windows-x86_64.zip
  • Windows (32-bit) - http://dl.google.com/android/repository/android-ndk-r10e-windows-x86.zip

您可以在官方页面上找到更多说明。

构建源代码

1.安装 the fork

首先,你需要react-native从你的fork安装。例如,要从官方仓库安装主分支,请运行以下命令:

npm install --save github:facebook/react-native#master

或者,您可以将repo克隆到您的node_modules目录并npm install在克隆的repo中运行。

2.添加gradle依赖关系

添加gradle-download-task为依赖项android/build.gradle

...
    dependencies {
        classpath 'com.android.tools.build:gradle:1.3.1'
        classpath 'de.undercouch:gradle-download-task:3.1.2'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
...

3.添加:ReactAndroid项目

:ReactAndroid项目添加到android/settings.gradle

...
include ':ReactAndroid'

project(':ReactAndroid').projectDir = new File(
    rootProject.projectDir, '../node_modules/react-native/ReactAndroid')
...

修改您android/app/build.gradle:ReactAndroid项目以代替预编译的库,例如 - 替换compile 'com.facebook.react:react-native:+'compile project(':ReactAndroid')

...
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:23.0.1'

    compile project(':ReactAndroid')

    ...
}
...

4.让第三方模块使用你的分叉

如果您使用第三方React Native模块,则需要覆盖它们的依赖关系,以便它们不捆绑预编译的库。否则,编译时会出错Error: more than one library with package name 'com.facebook.react'

修改你的android/app/build.gradle,并添加:

configurations.all {
    exclude group: 'com.facebook.react', module: 'react-native'
}

从Android Studio构建

从Android Studio的欢迎屏幕选择“导入项目”并选择android您的应用程序的文件夹。

您应该可以使用“ 运行”按钮在设备上运行您的应用。Android Studio不会自动启动打包程序,您需要通过npm start在命令行上运行来启动它。

补充笔记

从源代码构建可能需要很长时间,特别是对于第一个构建版本,因为它需要下载〜200 MB的工件并编译本机代码。每当您react-native从回购库更新版本时,生成目录可能会被删除,并且所有文件都会重新下载。为避免这种情况,您可能需要通过编辑~/.gradle/init.gradle文件来更改构建目录路径:

gradle.projectsLoaded {
    rootProject.allprojects {
        buildDir = "/path/to/build/directory/${rootProject.name}/${project.name}"
    }
}

构建Maven / Nexus部署

如果您发现需要将本地编译的React Native .aar和相关文件推送到远程Nexus存储库,则可以。

首先遵循Point Gradle to your Android SDK本页的部分。一旦你这样做了,假设你已经正确配置了Gradle,那么你可以从React Native签出的根目录运行以下命令来构建和打包所有必需的文件:

./gradlew ReactAndroid:installArchives

这会将通常包含在安装android目录中的所有内容打包node_modules/react-native/到您的React Native签出的根目录中。

测试

如果您对React Native进行了更改并提交了拉取请求,则所有测试都将自动在您的拉取请求上运行。要在本地运行测试,请参阅运行测试。

故障排除

Gradle构建失败ndk-build。请参阅上述关于local.properties文件的部分。

指南(Android) | Guides (Android)相关

React native

React Native 是一个 JavaScript 的框架,用来撰写实时的、可原生呈现 iOS 和 Android 的应用。

主页 https://facebook.github.io/react-native/
源码 https://github.com/facebook/react-native
发布版本 0.49

React native目录

1.开始 | Getting Started
2.指南 | Guides
3.APIs
4.组件:ActivityIndicator | Components: ActivityIndicator
5.组件:按钮 | Components: Button
6.组件:CheckBox | Components: CheckBox
7.组件:DatePickerIOS | Components: DatePickerIOS
8.组件:DrawerLayoutAndroid | Components: DrawerLayoutAndroid
9.组件:FlatList | Components: FlatList
10.组件:图像 | Components: Image
11.组件:KeyboardAvoidingView | Components: KeyboardAvoidingView
12.Components: ListView
13.Components: MaskedViewIOS
14.Components: Modal
15.Components: NavigatorIOS
16.Components: Picker
17.Components: PickerIOS
18.Components: ProgressBarAndroid
19.Components: ProgressViewIOS
20.Components: RefreshControl
21.Components: ScrollView
22.Components: SectionList
23.Components: SegmentedControlIOS
24.Components: Slider
25.Components: SnapshotViewIOS
26.Components: StatusBar
27.Components: Switch
28.Components: TabBarIOS
29.Components: TabBarIOS.Item
30.Components: Text
31.Components: TextInput
32.Components: ToolbarAndroid
33.Components: TouchableHighlight
34.Components: TouchableNativeFeedback
35.Components: TouchableOpacity
36.Components: TouchableWithoutFeedback
37.Components: View
38.Components: ViewPagerAndroid
39.Components: VirtualizedList
40.Components: WebView
41.创建 | Contributing
42.指南(Android) | Guides (Android)
43.指南(IOS) | Guides (iOS)
44.其他 | Miscellaneous