React Native 红屏各种坑

1. Can’t find variable: XXX

没有导入的问题,解决方法如下,把Can’t find variable: 之后的字符串进行导入;

import {

AppRegistry,

Text,

View,

Image

} from 'react-native';

2. iOS react-native 之react-packager has encountered an internal error,please check your terminal error

解决办法：

1、打开终端，重启下react-native，终端输入

react-native start

然后就ok啦，

2、如果还不行，在终端输入react-native start 之前先更新下watchman，终端输入：

brew upgrade watchman

然后再输入

react-native start

3. 导入react-native-vector-icons时遇到的各种坑
3.1 React Native - Check the render method of "TabBarIcon

版本 "react-native": "0.61.2"
主要是APP.jS文件引入格式不正确

错误写法 , react-native-vector-icons是个文件夹, 并不是一个JS文件

import Ionicons from 'react-native-vector-icons'

正确写法, 需要指定到JS文件目录

import Ionicons from 'react-native-vector-icons/Ionicons';

3.2 Unrecognized font family ‘Ionicons’

参考github上的react-native-vector-icons的使用方法

在Xcode里面打开项目, 右键选择add file

image.png

将font文件添加到项目里面：

image.png

然后还需要到info.plist文件添加一些配置：

image.png

复制下面的内容到plist里面: (各个版本的react-native-vector-icons可能ttf文件不一样,需要注意修改)

 <key>UIAppFonts</key>
    <array>
      <string>Fontisto.ttf</string>
      <string>Octicons.ttf</string>
      <string>Feather.ttf</string>
      <string>Entypo.ttf</string>
      <string>FontAwesome5_Brands.ttf</string>
      <string>MaterialCommunityIcons.ttf</string>
      <string>AntDesign.ttf</string>
      <string>Foundation.ttf</string>
      <string>Ionicons.ttf</string>
      <string>FontAwesome5_Solid.ttf</string>
      <string>FontAwesome5_Regular.ttf</string>
      <string>FontAwesome.ttf</string>
      <string>Zocial.ttf</string>
      <string>EvilIcons.ttf</string>
      <string>SimpleLineIcons.ttf</string>
      <string>MaterialIcons.ttf</string>
    </array>

运行项目, 可能会报错

error: Multiple commands produce '/Users/dream/LibraryzuiXinAwesomeProject.app/Zocial.ttf':
1) Target 'zuiXinAwesomeProject' (project 'zuiXinAwesomeProject') has copy command from ios/Fonts/Zocial.ttf' to '/zuiXinAwesomeProject.app/Zocial.ttf'
2) That command depends on command in Target 'zuiXinAwesomeProject' (project 'zuiXinAwesomeProject'): script phase “[CP] Copy Pods Resources”

跟Xcode版本有关, Xcode10以后,

不使用New Build System，在File > Project/Workspace Settings中的Share Project/Workspace Settings 里build system 将New Build System(Default)切换成Legacy build system

image.png

然后Xcode运行项目