使用最新的本机版本的createBottomTabNavigator和无法识别的字体系列出现问题

Question

error image simulator

我是本机开发的新手，实际上正在观看克隆Instagram应用程序的教程视频。但是看来这家伙正在使用较早的本机版本，这导致了我很多错误。我已经尝试了所有解决方案，并且都在线上尝试了，但是似乎都没有用。

首先使用图标：

尝试使用npx react-native link不能同时手动配置，但没有一个对我有用，这给了我一个艰难的时刻。

对于导航：

甚至在官方网站上尝试过该示例，但实际上对我不起作用。

我不介意是否需要从头开始重新修改代码，因为我已删除并重新启动了整个项目无数次。

谢谢您的期待...

这是我的App.js

/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/

import React from 'react';

import { StyleSheet, Text, View } from 'react-native'

import {createAppContainer} from 'react-navigation';

import {createStackNavigator} from 'react-navigation-stack';

import MainScreen from './Components/MainScreen'

const MainNavigator = createStackNavigator({
   Main: {screen: MainScreen},
});

const App = createAppContainer(MainNavigator);

export default App;

这是我的MainScreen.js

import React, { Component } from 'react'

import { Text, StyleSheet, View } from 'react-native'

import { createAppContainer } from 'react-navigation';

import { createBottomTabNavigator } from 'react-navigation-tabs';

import AddMediaTab from './AppTabNavigator/AddMediaTab'

import HomeTab from './AppTabNavigator/HomeTab'

import LikesTab from './AppTabNavigator/LikesTab'

import ProfileTab from './AppTabNavigator/ProfileTab'

import SearchTab from './AppTabNavigator/SearchTab'

import { Icon } from 'native-base'

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

class MainScreen extends Component {

static navigationOptions = {
    headerLeft: <Icon name="ios-camera-outline" style={{ paddingLeft: 10 }} />,
    title: "Instagram",
    headerRight:<Icon style={{ paddingRight:10 }} name="ios-send-outline" />
}
render() {
    return (
        <AppTabNavigator />
    );
}
}

const AppTabNavigator = createBottomTabNavigator({

HomeTab: {
    screen: HomeTab
},
SearchTab: {
    screen: SearchTab
},
AddMediaTab: {
    screen: AddMediaTab
},
LikesTab: {
    screen: LikesTab
},
ProfileTab: {
    screen: ProfileTab
}
})

export default MainScreen;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    }
    });

这是我的package.json

{
  "name": "InstagramClone",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "native-base": "^2.13.8",
    "react": "16.9.0",
    "react-native": "0.61.4",
    "react-native-gesture-handler": "^1.5.0",
    "react-native-reanimated": "^1.4.0",
    "react-native-screens": "^2.0.0-alpha.11",
    "react-native-vector-icons": "^6.6.0",
    "react-navigation": "^4.0.10",
    "react-navigation-stack": "^1.10.3",
    "react-navigation-tabs": "^2.5.6"
  },
  "devDependencies": {
    "@babel/core": "^7.6.2",
    "@babel/runtime": "^7.6.2",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-jest": "^24.9.0",
    "eslint": "^6.5.1",
    "jest": "^24.9.0",
    "metro-react-native-babel-preset": "^0.56.0",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

Answer 1

未链接本机模块时发生错误。使用最新的React Native，您根本不应该运行react-native link。它是自动的。

安装依赖项后，请确保安装Pod：

cd ios && pod install

然后重建您的应用程序]

react-native run-ios // or run-android