React-Native学习笔记此篇为实习期间，在开发易淘金Demo过程中，对于RN的学习笔记感悟以及踩坑总结，会随着项

1月4日

特点：终极跨平台解决方案，原生的，比较健壮。

主要有两款：RN和Flutter

单向数据绑定，RN帮忙封装了可以调用不同os的底层的API，可以提升开发效率，实现接近原生APP的开发。

但是RN现在仍然存在许多问题，包括下载，调试。

1月5日

React Native 中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。

如果父容器既没有固定的width和height，也没有设定flex，则父容器的尺寸为零。其子组件如果使用了flex，也是无法显示的。

RN中的flex布局，默认是沿垂直方向排列的

相当于

，相当于

1月6日

可以使用如下代码来检测os版本，并根据版本做对应的渲染：

const Component = Platform.select({
  ios: () => require('ComponentIOS'),
  android: () => require('ComponentAndroid')
})();

<Component />;

也可以根据os来使用不同的样式文件：

import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    ...Platform.select({
      ios: {
        backgroundColor: 'red'
      },
      android: {
        backgroundColor: 'blue'
      }
    })
  }
});

RN可以根据文件名后缀来自动选定不同的文件：

BigButton.ios.js
BigButton.android.js
BigButton.native.js //这种可以在web端进行复用

//之后可以去掉平台扩展名进行直接引用：
import BigButton from './BigButton';

RN的手势相应系统以及相关的钩子函数较为复杂：reactnative.cn/docs/gestur…

当与原生模块混用的时候，容易出现函数名重复导致的重载，此时需要使用RCT_REMAP_METHOD()来规避相关错误。

RN结构的两大支柱：TurboModules和Fabric组件

安装依赖的时候需要提前把模拟器关掉。

react-native-swiper是轮播图，react-native-vector-icons是相关的向量图标。

点击相关的组件必须被<Touchable>相关的原生组件包裹起来。

1月9日

array.filter(item=>条件) 返回的是条件为true的情况，也可以手写判断条件，然后return true，例如：

const test = array.filter((item, index)=>{
    if(item.abc==='abc') return true
    else return item.abc===index
})

在使用rn自带的navigationBar的时候，出现RNNScreen报错，好像是link没有正常运行，在使用npx pod-install ios之后问题解决！

查看相关文档，说在ios端开发时，需要先通过Cocoapods下载好pods，以为下载好Cocoapods就不需要再下载pods，现在看来还是需要额外下载一次pods。

1月10日

之前遇到的不能打开chrome debugger的问题，应该是没有安装pod导致的，因为之前报的错是flipper相关的，而pod的目录下有好多fliper相关的文件夹，所以基本可以断定没有安装pod就不能正常使用chrome debugger。

还有一个问题就是已经下载好了第三方icon库，但是引用的时候仍然不能识别，希望后面可以解决。

后续：www.cnblogs.com/shengulong/… 完美解决了上述问题！

2月2日

有时遇到无法找到对应模块的问题时，按照ts的提示使用npm对应的依赖可以解决问题。

2月6日

在RN中，不可以给标签设置borderBottom，这会导致borderBottom属性失灵，修复办法就是用把包裹起来，然后给设置styles即可。

2月10日

ActivityIndicator

RN中的原生组件<ActivityIndicator/>可以显示一个圆形的loading动态图。

FlatList

RN中的原生组件<FlatList/>继承的是PureComponent，所以对于props的判断为浅比较，所以如果没有产生对应的渲染，很有可能是props的传参的地址一样。

在<FlatList/>中，每个renderItem都应该提供一个不重复的key属性，可以提供一个keyExtractor函数来生成key。

    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA} //data只接受数组
        renderItem={renderItem} //从data中挨个取出数据并渲染到列表中
        //renderItem接收到的item即为data中的单个元素，可以看成是一个map函数，renderItem为一个函数，返回带有样式的元素
        keyExtractor={(item) => item.id}//为给定的item生成一个不重复的key
        extraData={selectedId}
      />
    </SafeAreaView>
    
    
    const renderItem = ({ item }) => {
        const backgroundColor = item.id === selectedId ? "#6e3b6e" : "#f9c2ff";
        return (
          <Item
            item={item}
            onPress={() => setSelectedId(item.id)}
            style={{ backgroundColor }}
          />
        );
      };

Image

主要通过设置<Image/>组件的source属性来显示图片。source的使用方法有多种：

    //直接使用 require('路径') 的形式来
    <Image
        style={styles.tinyLogo}
        source={require('@expo/snack-static/react-native-logo.png')}
      />

3月1日

在遇到找不到某某某模块的时候，可能需要到ios目录下的PodFile中去添加相关的目录代码，然后运行pod install之后，再重新yarn ios启动项目

可以拿<Stack.Navigator>来包裹<Tab.Navigator>，但是不能反着来。