ReactNative日常使用小记录

  • package.json
npm的package.json中的name,不能使用空格、大写字母和汉字
  • 事件监听
事件监听 DeviceEventEmitter
DeviceEventEmitter.emit('自定义名称',发送数据);
DeviceEventEmitter.addListener('自定义名称',(events) ={使用数据events});
  • FlatList
FlatList从0.48开始可以支持横向排列的换行,horizontal={true}

ListEmptyComponent //列表为空时渲染该组件
onPressItem 属性使用箭头函数,保证props的不变性
extraData  //放一个肯定会变化的data值,保证能够正确触发FlatList的更新
keyExtractor   //指定列表每一项的key值

某些场景碰到内容不渲染的情况,尝试设置removeClippedSubviews={false}
  • WebView
WebView支持html代码的解析输出,但是高度不能判断,最好使用在整个页面和固定高度的位置上;也可以使用远程获取html页面,获取html页面高度的方法设置WebView的高度,需要设置延迟获取。
  • 修改app名字
android/app/src/main/res/values/strings.xml中修改安卓的app名字
android/app/src/main/res修改图标48*48,72*72,96*96,144*144
ios修改info里的 Bundle display name
  • Image图片
image标签使用,远程获取uri,必须设定width和height值,否则有可能不显示
  • platform判断手机类型
Platform.OS === 'ios'

根据类型,判断输出

const instructions = Platform.select({
 ios: 'Press Cmd+R to reload,
 android: 'Double tap R on your keyboard to reload',
});
  • Dimensions获取屏幕宽高
    const {width, height} = Dimensions.get('window');
  • TextInput在安卓上默认有一个底边框,同时会有一些padding,需要设置
underlineColorAndroid="transparent" 和
样式padding: 0

安卓上如果设置multiline = {true},文本默认会垂直居中,可设置样式来使其居顶显示

textAlignVertical: 'top'
  • 错误处理
错误: hild_process.js:506 throw err; 
^ Error: spawnSync 
解决: chmod -R 777 node_modules
  • 修改入口文件
IOS 的 AppDelegate.m 中的 jsBundleURLForBundleRoot

jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];

0.49版本以后的react-native没有index.android.js和index.ios.js文件,而统一合并成了index.js。