时间戳

首页 > 解决方案 > 获取图标以使用 Vue native / React Native - createMaterialBottomTabNavigator

react-native - 获取图标以使用 Vue native / React Native - createMaterialBottomTabNavigator

问题描述

我正在尝试让底部选项卡导航器显示Vue Native.

Vue native我是编码新手，理解一些位如何和React native语法工作对我来说有点令人困惑。我搜索了互联网高低以找到我需要的信息。

我确实在官方React Native网站上找到了一些信息。Vue native官方网站没有包含关于此的详细信息。

所以，我的问题是如何让它工作？当我尝试执行下面的代码时，它会吐出一个错误代码。

提前感谢您的帮助:)//克里斯

我在下面留下一些代码片段：

<template>
  <app-navigator></app-navigator>
</template>

<script>
import {
  createAppContainer,
  createMaterialBottomTabNavigator,
  createStackNavigator,
} from "vue-native-router";

import Icon from '../node_modules/react-native-vector-icons/dist/FontAwesome.js';

import Home from "./screens/HomeScreen.vue";
import Message from "./screens/Message.vue"

const StackNavigator = createMaterialBottomTabNavigator({
  Hem: Home,
  Message: {
      screen: Message,
      navigationOptions: {
        title: 'woop',
        tabBarIcon: ({tintColor})=>{  
              <Icon name="ios-home" color={tintColor} size={25}/>  
          }
      },
    },
});

const AppNavigator = createAppContainer(StackNavigator);

export default {
  components: { Root, AppNavigator },
}
</script>

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "expo": "~36.0.2",
    "expo-font": "~8.0.0",
    "native-base": "^2.13.8",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
    "react-native-gesture-handler": "^1.5.2",
    "react-native-paper": "^3.4.0",
    "react-native-reanimated": "^1.4.0",
    "react-native-vector-icons": "^6.6.0",
    "react-native-web": "~0.11.7",
    "react-navigation-material-bottom-tabs": "^2.1.5",
    "vue-axios": "^2.1.5",
    "vue-native-core": "^0.1.4",
    "vue-native-helper": "^0.1.4",
    "vue-native-router": "^0.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.7.7",
    "babel-preset-expo": "~8.0.0",
    "vue-native-scripts": "^0.1.4"
  },
  "private": true
}

标签： react-nativevue.js

解决方案

我通过添加以下内容使其工作：

import * as React from 'react';
import Icon from 'react-native-vector-icons/FontAwesome';

  Message: {
          screen: Message, 
          navigationOptions: {
              tabBarLabel: 'Meddelanden', 
              tabBarIcon: <Icon name="rocket" size={25}/>,
          }
      }

推荐阅读