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

Question

我正在使用最新版本的 react-native (0.60.4) 从本地基础获取带有 Icon 组件的白屏。

这是我的代码

<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在线运行上述演示