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 schedule@0.4.0
-
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’
解决办法:- cd android
- gradlew clean
- cd …
- 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模拟器中运行时这样的:
为了找原因给了背景颜色,最后用真机调试是好的