反应导致空白屏幕的本机矢量图标

Question

我正在从本机库获得带有Icon组件的白屏，并带有最新版本的react-native（0.60.4）。

这是我的代码

<Item floatingLabel error={hasError} style={styles.inputElement}>
          <Icon name="ios-menu" style={{ fontSize: 20, color: "red" }} />
          <Label style={styles.placeHolderStyle}>{placeHolder}</Label>
          <Input
            secureTextEntry={hasSecureTextEntry}
            style={styles.inputPaddingLeft}
            onChangeText={text => this.props.onChangeText(text, key)}
            value={value}
          />
        </Item> 

如果我删除<Icon name="ios-menu" style={{ fontSize: 20, color: "red" }} />标记，则效果很好。

此外，以上代码也可与旧版本的react-native（0.55.4）配合使用

Answer 1

您可能从错误的软件包中导入了Icon。我尝试了您的代码，它的工作原理非常好。

输出

代码

import React, { Component } from 'react';
import { Container, Header, Content, Icon,Item,Label,Input } from 'native-base';
export default class App extends Component {
  render() {
    return (
      <Container>
        <Header />
        <Content>
          <Item error="false">
          <Icon name="ios-menu" style={{ fontSize: 20, color: "red" }} />
          <Label>This is some placeholder</Label>
          <Input
          />
        </Item> 
        </Content>
      </Container>
    );
  }
}

在线运行

您可以使用此link

在线运行以上演示