react-native踩过的坑

前端之家收集整理的这篇文章主要介绍了react-native踩过的坑前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

包管理

添加新的第三方包总会遇到各种问题,不是版本不对就是运行不起来,记录下遇到的问题:

Error: Cannot find module ‘xxx’

module.js:340
throw err;
^
Error: Cannot find module 'xxx'

这个问题若不是没引用包就是需要关联下依赖:

npm install -d

MainApplication.java:5: 错误: 程序包xxx.xxx.xx不存在

如果这个找不到的第三方包不是纯js包,那很有可能是没有link到Android和iOS项目中:
在React Native 0.27+版本中运行:

react-native link xxx-xxx-xx

如果是其它React Native旧版本,需要安装rnpm (npm install -g rnpm)

rnpm link xxx-xxx-xx

也可以手动link,例如在Android中先要将项目添加setting. gradlebuilde.gradle 然后再在MainApplication.java 中的 getPackages() 方法添加对应的包对象实例到List中。

undefined is not a function (evaluating ‘React.createClass’)

找不到这个方法,是不是React的版本是 ^16.0.0-beta.5修改版本为 ^16.0.0-alpha.12 就好了:

npm install react@^16.0.0-alpha.12 --save

高版本去掉了这个方法和React.PropTypes,所以这两个地方报错,检查代码,或者检查第三方包,选择修改代码或者回退React版本。

react-navigation

Android的标题不居中

Android中,默认情况下,title是靠左,紧靠返回按钮的,可以通过在stackConfig中添加下面的代码来居中:

navigationOptions: {
            ...
            headerTitleStyle: {
                ...
                alignSelf: 'center'
            },...
        },

如果没有左侧返回按钮或者右侧按钮,标题文字可以居中,但是那种有返回按钮的页面中,会导致title整体向右偏移,所以可以在右侧设置一个View,来让title居中:

static navigationOptions = ({navigation}) => ({
        headerTitle: '标题',headerRight: (
            <View/> ),});

这个问题可以关注Android Header Text Not Centered

持续更新React-Native遇到的坑。。。

猜你在找的React相关文章