安装环境

java+jdk+sdk
sdk可以直接通过IDE安装
根据官方文档下载SDK Platforms+SDK Tools所需要的相关工具

配置IDE的JDK和SDK路径
根据RN官方文档配置
ANDROID_HOME环境变量
其他环境变量

安装RN命令

1
npm i -g react-native-cli

初始化工程目录

1
react-native init demo

打包运行

1
react-native run-android

idea关联genymotion

关联参考

查看官网示例

React-Native
NDK-10e
运行方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
在react-native目录, 新建local.properties
sdk.dir=/Users/wangchenlong/Installations/android-sdk
ndk.dir=/Users/wangchenlong/Installations/android-ndk-r10e

执行
cd react-native
./gradlew :ReactAndroid:assembleDebug

再执行
./gradlew :ReactAndroid:installArchives

启动服务
./packager/packager.sh

安装项目
cd react-native
./gradlew :Examples:UIExplorer:android:app:installDebug

React+ReactNative基础知识

React1)
React2)
React3)
Flex
按钮

flex

1
2
3
4
5
6
7
flexDirection:'row',
flexWrap:'nowrap',
justifyContent:'center',
alignItems:'center',

alignSelf:'center'  // 子视图属性会覆盖alignItems
flex:0  // 默认为0

命令

设备名查询

1
adb devices

测试sdk是否配置好环境变量

1
adb

测试jdk是否配置好环境变量

1
adb

虚拟技术 VT-x 和 Hyper-V冲突

HAXM下载-开启VT-x
关闭Hyper-V

下载Gradle依赖

Sync Project with Gradle Files
idea按钮

关联依赖

1
Alt+Enter

查看、修改Gradle版本

单击‘File’菜单，出现下拉列表，选择‘Project Structure’,单击‘Project’就可以查看和修改了

生成签名证书

见Nginx学习笔记

打包

安卓打包1
安卓打包2
IOS打包

安卓打包命令

1
2
3
React-native bundle --platform android --dev false --entry-file index.android.js 
--bundle-output android/app/src/main/assets/index.android.bundle 
--assets-dest android/app/src/main/res/

bundle 拆分

方案一：
优点：
客户端可以直接嵌入base部分，而不用进行二次合成
http://blog.csdn.net/sinat_17775997/article/details/70511668
https://github.com/desmond1121/react-native-split

方案二：
缺点：客户端必须进行一次base+business合成，效率会相对低一点
http://solart.cc/2017/02/22/react-native-jsbundle_patch/?utm_source=tuicool&utm_medium=referral

方案三：
https://github.com/facebook/react-native/pull/10804
https://github.com/facebook/metro-bundler

Debug调试

方法一：
仿真器中CTRL+M出现菜单选 remote js debugging

方法二：
IDEA的RN插件选择open debuger-ui

注意：只能打开一个debugger平台否则报错

安装问题汇总

1.sync提示

Execution failed for task ‘app:prepareDebugAndroidTestDependencies’
解决办法：https://stackoverflow.com/questions/30558737/execution-failed-for-task-apppreparedebugandroidtestdependencies

2.打包出现找不到react

1
npm i

查看最后 npm WARN 里边会提示ReactNative依赖的React版本

3.CANNOT TRANSLATE guest DNS ip

关闭代理重启AS

4.真机上出现不支持64位系统

http://blog.csdn.net/ssksuke/article/details/52611689

5.Android project not found. Maybe run react-native android first?

可以运行

1
react-native upgrade

该命令运行之后你会发现你的android项目的目录结构变化了

之后可以执行

1
react-native run-android

6.安卓的跳转写法

1
startActivity(new Intent(MainActivity.this, MyReactActivity.class));

7.react-native run-android Android project not found

因为目录结构和rn默认的目录不一直

1
react-native upgrade

8.Cannot resolve syymbol ‘build’ on line import com.android.build.OutputFile in app/build.gradle

用IDEA单独打开android目录，而不是打开整个项目目录

9.Gradle版本和Gradle插件版本不对应

方法一：
Gradle版本位置：gradle → wrapper → gradle-wrapper.properties

1
distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip

Gradle插件版本位置：根目录下build.gradle里的

1
classpath 'com.android.tools.build:gradle:2.2.3'

将一个在本机可以跑的项目的版本号，直接复制过去就可以了
方法二：（推荐-自动更新）：
前提：setting(内搜索Gradle)->选中use gradle wrapper task configuration（以gradle-wrapper内版本配置自动下载），
如果下载失败只能下载后尝试选择用本地的gradle版本
修改一次build.gradle里的版本号后，右上角会提示sync点击，会出现报错让更新gradle版本，点击更新就ok了

方法三：
直接在IDEA的Terminal里输入

1
gradlew

则会自动安装需要的版本（要在wrapper.properties配置好）
下载好的目录

1
C:\Users\zhangpeng\.gradle\wrapper\dists\gradle-2.2-bin\ca0flae0itb57he40lyj6fhpp\gradle-2.2

编程问题汇总

兼容两端

样式

harmony
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    ...Platform.select({
      ios: {
        backgroundColor: 'red',
      },
      android: {
        backgroundColor: 'blue',
      },
    }),
  },
});

组件：

harmony
1
2
3
4
const Component = Platform.select({
  ios: () => require('ComponentIOS'),
  android: () => require('ComponentAndroid'),
})();

参考资料
参考资料

动画transform

harmony
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
class Playground extends React.Component {
  constructor(props: any) {
    super(props);
    this.state = {
      bounceValue: new Animated.Value(0),
    };
  }
  render(): ReactElement {
    return (
      <Animated.Image                         // 基础组件: Image, Text, View
        source={{uri: 'http://i.imgur.com/XMKOH81.jpg'}}
        style={{
          flex: 1,
          transform: [                        // `transform`   有顺序的数组
            {scale: this.state.bounceValue},  // Map `bounceValue` to `scale`
          ]
        }}
      />
    );
  }
  componentDidMount() {
    this.state.bounceValue.setValue(1.5);     // 动画开始的时候 设置一个比较大的值
    Animated.spring(                          // 动画可选类型: spring, decay, timing
      this.state.bounceValue,                 // Animate `bounceValue`
      {
        toValue: 0.8,                         // Animate to smaller size
        friction: 1,                          // Bouncier spring
      }
    ).start();                                // 开始执行动画
  }
}

transform使用
注意：rotate有个问题
rotate解决

genymotion, javascript, js, react, react-native, reactnative
← Prev Next →