Question

我正在尝试使用图像作为tabBarIcon，但是我不知道如何正确设置它，即使我尝试了许多可以在这里找到的答案。我的导航器：

import React from 'react';
import { Text, FlatList, View, ScrollView, Image, StyleSheet } from 'react-native';
import {createBottomTabNavigator, createAppContainer} from 'react-navigation';

import Dashboard from '../components/bottom-navigator/Dashboard';

import Styles from '../assets/BottomNavigatorStyles';

const BottomNavigator = createBottomTabNavigator(
    {
        Dashboard: {
            screen: Dashboard,
            navigationOptions: () => ({
                tabBarIcon: ({tintColor}) => {
                    return <Image source={require('../assets/images/i-dashboard.svg')} style={{width: 25, height: 25}} />  
                },
            }),
        },
    },
    {
        tabBarOptions: {
            // showLabel: false,
            style: Styles.BottomNavigator,
        },
        backBehavior: 'history',
    }
);

export default BottomNavigator;

package.json：

"dependencies": {
        "expo": "^33.0.0",
        "react": "16.8.3",
        "react-dom": "^16.8.6",
        "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
        "react-native-web": "^0.11.4",
        "react-navigation": "^3.11.1",
        "react-redux": "^7.1.0",
        "redux": "^4.0.4",
        "redux-promise": "^0.6.0",
        "redux-thunk": "^2.3.0"
    },

Answer 1

svg无法显示在image中。如果您想使用svg，则可以尝试expo-svg-uri个模块。

示例

import SvgUri from "expo-svg-uri";

const TestSvgUri = () => (
  <View style={styles.container}>
    <SvgUri
      width="200"
      height="200"
      source={{
        uri: "http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg"
      }}
    />
  </View>
);

反应本机：返回navigationOptions.tabBarIcon中的图像不起作用

1 个答案: