Question

这里我使用的是基于本机的最新版本，并使用所有方法道具，但我的图标仍未出现在标题中

import React, { Component } from "react";
import {
    View,
    Text,
    StyleSheet
} from "react-native";
import {Header,Icon} from 'native-base'

class HomeScreen extends Component {
    static navigationOptions = { header: null }
    render() {
        return (
          <View style={{flex:1,backgroundColor:'#3q455c',width:"100%"}}>
          <Header
           placement="left"
           leftComponent={{ icon: 'menu', color: 'white' }}
           centerComponent={{ text: 'MY TITLE', style: { color: 'white' } }}
           rightComponent={{ icon: 'home', color: 'white' }}
           />

          </View>
        );

}}
export default HomeScreen;

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

Here the header function is not showing in the header component

Answer 1

要解决这个问题，我做了：

react-native link
react-native run-android

和显示的图标。

Answer 2

安装react-native-vector-icons

npm install --save react-native-vector-icons

iOS：

react-native link react-native-vector-icons

Android：

编辑android / app / build.gradle（不是android / build.gradle）并添加以下内容：

project.ext.vectoricons = [
iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // Name of the font files you want to copy]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

并使用：

<Icon
type="MaterialIcons"
name="menu"
/>

document

Answer 3

我不知道为什么您的代码不起作用。这是我正在使用的：

import React from "react";
import { SafeAreaView } from 'react-native';
import {
  Container, Header, Title, Left, Icon, Right, Button, Body, Content, Text, Card, CardItem
} from "native-base";

export default class Test extends React.Component {
  static navigationOptions = {
    header: null
  };

  render() {
      return (
        <SafeAreaView style={{ flex: 1 }}>
          <Container style={{ flex: 1, backgroundColor: '#fff' }}>
            <Header style={{ backgroundColor: '#41b8f4' }}>
              <Left>
                <Button
                  transparent
                  onPress={() => console.log('button')}>
                  <Icon name="menu" />
                </Button>
              </Left>
              <Body>
                <Title>Medical</Title>
              </Body>
              <Right />
            </Header>

            <Content padder style={{ flex: 1 }}>
              <Card>
                <CardItem>
                  <Left>
                  <Icon active name="md-person" />
                  <Text>text</Text>
                  </Left>
                  <Right>
                    <Icon name="arrow-forward" onPress={() =>
                      console.log('right')} />
                  </Right>
                </CardItem>
              </Card>
            </Content>
          </Container>
        </SafeAreaView>
      );
    }
  }

Answer 4

由于某种原因，react-native-vector-icons没有链接到我的项目。所以：

react-native link react-native-vector-icons

帮了我大忙。

当然，您必须事先安装了react-native-vector-icons模块，例如：

npm install react-native-vector-icons --save

继续编码，让代码随身携带！

Answer 5

本机库使用“窗口”尺寸作为“选择器”项目，因此在此类问题中就结束了。将这些行添加到您的选择器。它将解决您的问题。

style={{ width: '80%' }}
placeholderStyle={{ maxWidth: '100%' }}
textStyle={{ maxWidth: '100%' }}

https://github.com/GeekyAnts/NativeBase/issues/2630#issuecomment-479847012

Answer 6

本机库中的图标是使用react-native-vector-icons包提供的。您不需要安装矢量图标，因为它与本机基础捆绑在一起。我也遇到了图标不显示的相同问题。您需要做的就是将矢量图标链接到您的项目。

react-native link react-native-vector-icons

此后，图标应在重新安装应用程序时出现。

Answer 7

Nirmal Dalmia的答案有效，但是如果您使用RN> = .60，则必须在链接之前安装它，如下所示：

npm install react-native-vector-icons
react-native link react-native-vector-icons

似乎是这种情况，因为从.60开始，RN会自动链接您的npm依赖项。由于默认情况下react-native-vector-icons嵌入本机库中，因此不会自动链接。现在，我在运行react-native run-android时遇到错误，告诉我不要手动链接，但是图标却显示出来。

Answer 8

对于我来说，在app/build.gradle的行下方添加并重新创建内部版本react-native run-android后，图标将显示。

应用来自：“ ../../ node_modules / react-native-vector-icons / fonts.gradle”

Answer 9

由于某些原因，我不得不使用这种方式：

<Icon type='MaterialIcons' name='menu' />

反对这种方式：

<Icon android='md-menu' />

虽然找不到原因。这使得区分Android和iOS图标变得更加复杂。

Answer 10

您是否使用 Validate 命令安装了 Native Base 2.x 所需的对等依赖项？ https://docs.nativebase.io/docs/GetStarted.html

这为我解决了这个问题：
from urllib.request import urlopen from bs4 import BeautifulSoup as BS from urllib import request import pandas as pd import os import re html = request.urlopen(https://en.wikipedia.org/wiki/Charles_Ehresmann) bs = BS(html.read(), 'html.parser') data = pd.DataFrame({''known for':[],)} try: name = bs.find('h1').text except: name = '' try: known = bs.find('th',string = 'Known.*').next_element.text #? except: known = ''

Answer 11

您可以出于相同目的使用此方法

import {Icon,Container,Header,Content,Body,Title,Left,Right} from 'native-base'

...
<Header style={{backgroundColor:"#000"}}>
      <Left>
          <Icon name="menu"  />
    </Left>
    <Body>
      <Title>
        Body text
      </Title>
    </Body>
    <Right>
          <Icon name="menu"  />
    </Right>
  </Header>

您可以参考http://nativeiconbase.com/了解更多图标选项

标题中未显示基于本机的图标

11 个答案: