react-native 升级日志----0.39.2版本升级到0.45.1

react

1、react-native 升级

1
2
3
4
5
6
7
8
(1)npm info react-native 查看react-native版本，确认升级的最新版本
(2)npm install --save react-native@0.45.1  升级react-native到0.45.1版本，成功后会有如下react适配的提示
npm WARN react-native@0.45.1 requires a peer of react@16.0.0-alpha.12 but none was installed.
npm WARN com.ppmoney.react.carloan@0.0.1 No repository field.
npm WARN com.ppmoney.react.carloan@0.0.1 No license field.
(3)npm info react 查看react版本，确认可以适配react-native的react版本
(4)npm install --save react@16.0.0-alpha.12  升级react到15.5.1版本
(5)react-native upgrade合并代码

2、android 原生升级
依赖库：

1
2
3
dependencies {
    compile 'com.facebook.react:react-native:+'
}

由于配置的问题，容易导致编译出来的build下的jar包没找到，所以比较稳妥的做法是直接指定版本：

1
2
3
dependencies {
    compile 'com.facebook.react:react-native:0.45.1'
}

3、解决兼容性问题
1、ReactInstanceManager.Builder 变成：ReactInstanceManagerBuilder
2、从0.44版本开始，Navigator被从react native的核心组件库中剥离到了一个名为react-native-deprecated-custom-components的单独模块中。如果你需要继续使用Navigator，则需要先npm install –save react-native-deprecated-custom-components，然后从这个模块中import，即import { Navigator } from ‘react-native-deprecated-custom-components’.
官方推荐使用的是：react-navigation
配置：npm install –save react-navigation
http://blog.csdn.net/u013718120/article/details/72357698?locationNum=10&fps=1

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
32
33
34
35
36
37
38
39
40
41
/**
*官方推荐写法
**/
import {
  StackNavigator,
} from 'react-navigation';

const App = StackNavigator({
  Main: {screen: MainScreen},
  Profile: {screen: ProfileScreen},
});

/***为了更好与原生交互的写法**/
export  default class TabRoute extends React.Component {
    constructor(props) {
        super(props)
        console.log("linzhenhua", "constructor:  ")
        this.main = StackNavigator({
                HomeScreen : {
                    screen: HomeScreen,
                },
                SecondScreen: {
                    screen: SecondScreen,
                },
            },
            {
                initialRouteName: props.routeName, //外部传进来的一些初始界面
                initialRouteParams: props.routeParams,  //外部传进来的一些初始参数
                mode: 'card',
                headerMode: 'none',
            }
        )
    }
    render() {
        return (
            <this.main />
        )
    }
}

AppRegistry.registerComponent('TabRoute', () => TabRoute)

获取参数this.props.navigation.state.params
3、BaseReactActivity里面的getData不支持传输hashMap

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
//Arguments.java
 public static WritableMap fromBundle(Bundle bundle) {
    WritableMap map = createMap();
    for (String key: bundle.keySet()) {
      Object value = bundle.get(key);
      if (value == null) {
        map.putNull(key);
      } else if (value.getClass().isArray()) {
        map.putArray(key, fromArray(value));
      } else if (value instanceof String) {
        map.putString(key, (String) value);
      } else if (value instanceof Number) {
        if (value instanceof Integer) {
          map.putInt(key, (Integer) value);
        } else {
          map.putDouble(key, ((Number) value).doubleValue());
        }
      } else if (value instanceof Boolean) {
        map.putBoolean(key, (Boolean) value);
      } else if (value instanceof Bundle) {
        map.putMap(key, fromBundle((Bundle) value));
      } else {
        throw new IllegalArgumentException("Could not convert " + value.getClass());
      }
    }
    return map;
  }

4、默认的nineoldandroids已经不支持，可以考虑用系统的animation库，nineoldandroids是为了适配3.0以下动画的提供的兼容库，目前市面上大部分手机已经是4.0以上的手机，可以完美支持系统的动画库

5、PropTypes has been moved to a separate package. Accessing React.PropTypes is no longer supported and will be removed completely in React 16. Use the prop-types package on npm instead

1
2
3
4
5
6
7
8

npm install --save prop-types


//使用时例子：
import PropTypes from 'prop-types'

customStyles: PropTypes.object,

6、ViewPagerAndroid兼容性：动态更新pages会显示白屏，预计是底层的适配没做好，把默认图与ViewPagerAndroid分开显示

7、BackAndroid is deprecated ,instead of BackHandler

8、自带的图片库Fresco也升级了，里面的一些弃用的API需要同步升级

9、TabNavigator里面的component切换，设置属性renderToHardwareTextureAndroid会导致重影问题

10、keyboardShouldPersistTaps = {true} is deprecated,use keyboardShouldPersistTaps=”always”instead

11、react-navigation与redux结合：
redux通过props自定义的属性传进最新的参数
navigation通过props里面的navigation.state.params传进来，与redux的数据刷新可以互不影响

附录
1、undefined is not an object(evaluating ReactPropTypes.string):React模块没有正确安装
npm install –save react@16.0.0-alpha.12

2、DeviceInfo native module is not installed correctly:
(1)检查node服务是否开启
(2)本地包与远程包可能有冲突，重启一下应用

本文标题:react-native 升级日志----0.39.2版本升级到0.45.1

文章作者:剑客爱编程

发布时间:2017-09-04, 23:01:03

最后更新:2017-09-04, 22:54:37

原始链接:https://iskylove.github.io/2017/09/04/react_native_upgrade/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录
,