react-native安装依赖

标签： react-native、yarn、style-sheet、setTimeout

---

使用react-native开发app的时候，官方推荐使用yarn,尤其在window环境下，注意：不要使用cnpm！cnpm安装的模块路径比较奇怪，packager不能正常识别！在linux环境下可能会存在权限问题，需要设置一下。

---

setTimeout在app后台不运行

---

1.使用BackgroundTimer.setTimeout来代替setTimeout在app后台不运行的问题

import BackgroundTimer from 'react-native-background-timer';

BackgroundTimer.setTimeout(() => {
drive(msgs, len) }, 500);

一些样式问题

---

1. 状态栏StatusBar

前几天打包Android和ios的APK到手机上的时候，发现安卓机子上有显示状态栏，而苹果机子上一片黑，找了半天样式问题都没有找到，后来发现是两个系统的状态栏默认配色不一样。

  <StatusBar
     backgroundColor="blue"
     barStyle="light-content"
   />

状态栏样式
default - 默认的样式（IOS为白底黑字、Android为黑底白字）
light-content - 黑底白字
dark-content - 白底黑字

2. 输入框TextInput

<View style={{ borderBottomColor: '#808080', borderBottomWidth:1}}> 
<TextInput
    borderBottomColor={'rgba(255,255,255,0.3 )'}
    underlineColorAndroid={'transparent'}
/>
</View>

对输入框设置borderBottomColor的时候在Android有效，ios无效，查看文档的时候发现当multiline=false时，为元素的某一个边添加边框样式（例如：borderBottomColor，borderLeftWidth等）将不会生效。为了能够实现效果你可以使用一个View来包裹TextInput。TextInput在安卓上默认有一个底边框，同时会有一些padding。如果要想使其看起来和iOS上尽量一致，则需要设置padding:0，同时设置underlineColorAndroid="transparent"来去掉底边框。

3. 安卓和ios设置不同样式

由于安卓手机和苹果手机样式上的细微差异，可以简单的使用react-native的Platform来区分系统

 textInfo: {
    lineHeight: (Platform.OS === 'ios') ? 45 : 32,
}