react native App踩坑笔记(持续更新。。。)

一 cocoapod 安装问题

在苹果上运行rn项目是需要cocoapod管理依赖的，官网有介绍，不然在你初始化的时候就会有提示说cocoapod安装依赖失败。然而这个cocoapod是很难安装的如果你没有科学上网的工具。如果有人遇到这个cocoapod 死活安装失败的情况，可以去找一下科学上网的工具，例如蓝灯，一般付费的比较稳定。

二 使用react-native-navigation做导航导致的问题

1 、不管ios还是安卓都出现'RNGestureHandlerModule.Direction'

解决办法->ios苹果端：cd ios; pod install;

                -->android安卓端： 安装yarn add react-native-screens, 在build.gradle文件的dependencies增加： 

implementation 'androidx.appcompat:appcompat:1.1.0-rc01' 
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'

记住这个要在build.gradle(module: react-native-gesture-handler) 这个文件里面添加，别加错了

2、安卓端闪退或白屏问题

上面我们已经解决了红色警告RNGestrue....这个问题，高兴的飞起。可是当你安装别的依赖或者第二次打开项目，你会发现把app运行在安卓端的时候，app闪退了，或者代开了一个白屏代码什么的都没有执行，一脸懵逼。

这是怎么回事，我自己也倒腾了半天，结果回android studio 一看我的天build.gradle(module: react-native-gesture-handler)这个文件后面加的两句语句被清空了。

嗯，解决办法就是重新把

implementation 'androidx.appcompat:appcompat:1.1.0-rc01' 
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'

这两句话加上。

三 使用react-native-svg-uri做svg图标

貌似这个svg图片如果用inkscape软件编辑的svg不识别，不知道为什么，但是在iconfont直接下载的就可以识别，adobe ai矢量工具我没试过修改

yarn add react-native-svg-uri
yarn add react-native-svg
mac: npx react-native link react-native-svg
windows: react-native link react-native-svg

使用：
import SvgUri from 'react-native-svg-uri';
<SvgUri width="200" height="200" source={require('./img/homer.svg')} />

四 使用react-native-iphone-x-helper解决iphoneX底部占位或者遮挡问题

当你安装了上面的react-native-navigation的时候其实它已经帮你默认安装了react-native-iphone-x-helper了，所以直接引入使用就好，如果实在不懂怎么安装，上GitHub搜索就好。使用方法

import { getBottomSpace } from 'react-native-iphone-x-helper'
<View style={{paddingBottom: getBottomSpace(), backgroundColor: '#fff'}}></View>

五 react-navigation 5.x 跳转动画设置

在Stock.Screen的配置项cardStyleInterpolator里配置动画，这个动画配置项有以下四种：

• forHorizontalIOS
  -模拟IOS端从右侧往左侧插入的标准卡片式页面跳转。
• forVerticalIOS
  -从底部插入标准iOS样式的幻灯片（用于模式）。
• forModalPresentationIOS
  -iOS 13中的标准iOS样式模态动画。
• forFadeFromBottomAndroid
  -Android Oreo的标准Android风格从底部逐渐淡入。
• forRevealFromBottomAndroid
  -Android Pie从底部显示标准的Android风格。

<NavigationContainer>        
    <Stack.Navigator headerMode={"none"} headerShown={false}>          
        <Stack.Screen name="Home" component={HomeScreen}/>          
        <Stack.Screen
            name="ApplyDetail"             
            component={ApplyDetail}
            options={{ 
                cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS, 
            }}/>        
    </Stack.Navigator>     
</NavigationContainer>

六  红屏报错unable to load script make sure you're either running a metro server

1） 项目中在android/app/src/main/创建文件夹 assets

2）项目中执行命令

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res 

3） 运行yarn android/yarn ios