反应本机 tabbarIosItem

Question

如何允许 tabbarIOS.item 使用我的图片？

这是我的代码

我有一个名为 itemSelected 的图像

    <TabBarIOS.Item
      selected={this.state.selectedTab === 'Item'}
      icon={require('image!itemNotSelected')}
      selectedIcon={require('image!itemSelected')}
      title="Item"
      onPress={() => {
          this.setState({
              selectedTab: 'Item',
          });
      }}>

但是，我只能在我的标签栏中看到一个方框正在从 react-native 加载。

Answer 1

在 React Native 中有一个很好的 tutorial 用于实现 TabBar。您可以使用您的图片：

icon={{uri:'itemNotSelected'}}
selectedIcon={{uri:'itemSelected'}}

来自 link 的代码：

render() {
    return (
      <TabBarIOS selectedTab={this.state.selectedTab}>
        <TabBarIOS.Item
          selected={this.state.selectedTab === 'welcome'}
          icon={{uri:'featured'}}
          onPress={() => {
              this.setState({
                  selectedTab: 'welcome',
              });
          }}>
            <Welcome/>
        </TabBarIOS.Item>
        <TabBarIOS.Item
          selected={this.state.selectedTab === 'more'}
          icon={{uri:'contacts'}}
          onPress={() => {
                this.setState({
                    selectedTab: 'more',
                });
          }}>
          <More/>
        </TabBarIOS.Item>
      </TabBarIOS>
    );
  }

希望对您有所帮助！

Answer 2

出现方框是因为你的图片没有透明区域，所以用蓝色填满了整个图片，结果是蓝色方框。

上面的代码工作正常。

反应本机 tabbarIosItem

React-native tabbarIosItem

react-native