React Native从入门到放弃

React Native中文社区:
https://reactnative.cn/docs/getting-started
React Native中文社区论坛:
http://bbs.reactnative.cn/category/4/求助专区
React Native 豆瓣demo:
https://github.com/xkdaq/react-native-douban
我的第一个React Native项目:
https://github.com/xkdaq/react-native-news

一、组件以及三方库

react-navigation 页面切换
react-native-router-flux 路由跳转
react-native-vector-icons 图标库
react-native-side-menu 侧边栏滑动
react-native-splash-screen 启动页
react-native-swiper轮播图
react-native-scrollable-tab-view 类似android中的tablayout的tab切换库
react-native-modal-dropdown 下拉框
react-native-i18n 国际化切换语言工具库
react-native-wechat微信分享支付库
Axios 基于 promise 的 HTTP 库
teaset UI库

三、学习项目(2018.10.22)

1.【reading】这个项目主要学习react-native-scrollable-tab-view 组件,运行前需要去万维易源申请api)
我的appId:78112
我的app秘钥:dbba1f1a4b83451ebfb5bbf934761add
项目地址:https://github.com/attentiveness/reading
2.【OneM】这个项目稍微东西有点多,反正我新手只看得懂一点点,其中第二个和第三个模块好像有报错,但是不影响整个项目的运行
项目地址:https://github.com/guangqiang-liu/OneM
3.【RNExample】这个项目里面是一些小功能和工具的集合
项目地址:https://github.com/puti94/RNExample

十、问题

1.ReactNative:The development server returned response error code: 500
原因:react-native的版本号0.57.0和0.57.1需要手动安装@babel/runtime和schedule,在项目的package.json文件可以查看react-native的版本号
解决:项目路径下执行yarn add -D @babel/runtime [email protected]
2.用webstorm创建react native项目之后直接运行android项目会报错
报错:SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable
解决:将android studio项目里面的local.properties文件复制一份到react native项目下的android目录下
3.搜索框SearchBar在android8.0上面使得键盘顶起主页底部导航栏(react-native-tab-navigator)
解决: 在android项目的清单文件的主页MainActivity直接修改android:windowSoftInputMode属性值

<activity
   android:name=".MainActivity"
   android:label="@string/app_name"
   android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
   android:windowSoftInputMode="stateAlwaysHidden|adjustPan">
   <intent-filter>
       <action android:name="android.intent.action.MAIN" />
       <category android:name="android.intent.category.LAUNCHER" />
   </intent-filter>
 </activity>

4.React Native :
Could not expand ZIP ‘C:\Users\kekex.gradle\caches\modules-2\files-2.1\com.aliyun.dpa\oss-android-sdk\2.8.0\23da7bb0c724346357a65db093e7445bf98f0c99\oss-android -sdk-2.8.0.aar’
解决办法：
1. cd android
2. gradlew clean
3. cd …
4. react-native run-android
5.react-native-scrollable-tab-view
问题:https://github.com/happypancake/react-native-scrollable-tab-view/issues/937

error: bundling failed: SyntaxError: **\node_modules\react-native-scrollable-tab-view\
SceneComponent.js: A trailing comma is not permitted after the rest element (9:32)
   7 |
   8 | const SceneComponent = (Props) => {
>  9 |   const {shouldUpdated, ...props, } = Props;
     |                                 ^
  10 |   return <View {...props}>
  11 |       <StaticContainer shouldUpdate={shouldUpdated}>
  12 |         {props.children}

暂时处理方法是找到react-native-scrollable-tab-view\SceneComponent.js文件删除逗号

const SceneComponent = (Props) => {
  const {shouldUpdated, ...props} = Props;
  return <View {...props}>
      <StaticContainer shouldUpdate={shouldUpdated}>
        {props.children}
      </StaticContainer>
  </View>;
};

6.build报错

Could not find play-services-basement.aar (com.google.android.gms:play-services-basement:11.0.1).

我的是在项目的根目录build.gradle文件添加google()就好了

repositories {
        jcenter()
        google()
        maven { url 'https://maven.google.com'  }
}

allprojects {
    repositories {
        jcenter()
        google()
        mavenLocal()
        maven { url 'https://maven.google.com'  }
    }
}

参考:https://stackoverflow.com/questions/50563407/could-not-find-play-services-basement-aar

7.Text不能填充整个屏幕的问题

 render() {
        return (
            <View style={{flex: 1, width: width, backgroundColor: 'powderblue'}}>
                <Text style={{
                    width: width,
                    color: 'white',
                    marginTop: 50,
                    backgroundColor: 'steelblue'
                }} numberOfLines={2}>我是一条很长的文字,很长的标题,但是我不能填充屏幕,原因是模拟的问题</Text>
            </View>
        );
    }

最后在Genymotion模拟器中运行时这样的:

为了找原因给了背景颜色,最后用真机调试是好的

React Native从入门到放弃

猜你喜欢