React Navigation - 来自 AsyncStorage 的自定义图标

Question

我正在使用 react-navigation，对于我的 tabBar 的其中一个图标，我想使用存储在 AsyncStorage 中的图像。但是获取该图像所需的时间太长，因此无法渲染图像。我可以将我的 AsyncStorage.getItem 放在哪里，以便我的 tabNavigator 可以及时使用它？我似乎找不到如何将道具传递给 TabNavigator，只能传递给带有 screenProps 的屏幕。谢谢！

编辑： 这是我目前正在做的事情：

// indexTab.js

class indexTab extends Component {

render() {
        return <Tabs />;
    }
}

// router.js

export const Tabs = TabNavigator (
{
(...)
Profile: {
    screen: Profile,
    navigationOptions: {
        tabBarIcon: ({ focused }) => 
                <Image source={{uri: "'"+getImage()+"'"}} style={styles.icon}/>
    },
},
}, {    tabBarOptions: {
        showIcon: true,
        showLabel: false,
        style: {
            backgroundColor: 'white',
            height: 70,
        },
        iconStyle : {
            height: 50,
            width: 50,
            borderRadius: 50
        }
    }
},

async function getImage() {
  AsyncStorage.getItem('id_photo').then((photo) => {
    var value = photo;
    return value;
})

}

我已经对两个函数进行了测试，一个返回所需的 url，另一个（如上）从 asyncstorage 获取 url；在第一种情况下，图标呈现，而不是在第二种情况下，我认为这意味着 asyncstorage.getitem 在标签呈现之前无法获取 url

Answer 1

我解决了我的问题！实际上，我没有将这两个元素放在两个不同的文件中（我这样做是因为我在教程中找到了它），而是将我的 Tabs const 放在 indexTab 类的渲染中。然后，您只需将 AsyncStorage 放入您的 ComponenetDidMount 并为您的 url 设置一个状态和一个布尔状态以强制您返回等待！如果有人感兴趣，这是我的最终代码：

class indexTab extends Component {
constructor(props) {
super(props);
this.state = {
    image: null,
    isLoading: true
};

}

ComponentDidMount() {
    AsyncStorage.getItem('id_photo').then((photo) => {
        this.setState({ image: photo, isLoading: false})
        console.log(this.state.image);
    })
  }

render() {

  if (this.state.isLoading) {
    return (
        <View style={{flex: 1, paddingTop: 20}}>
            <ActivityIndicator/>
        </View>
      );
  }

  else {
    const Tabs = TabNavigator (
    {
      (...)
      Profile: {
        screen: Profile,
        navigationOptions: {
          tabBarIcon: ({ focused }) => 
              <Image source={{uri: this.state.image}} style={styles.icon}/>
        },
      },
    },  
    {
      tabBarPosition: 'bottom',
      tabBarOptions: {
        showIcon: true,
        showLabel: false,
        style: {
          backgroundColor: 'white',
          height: 70,
        },
        iconStyle : {
          height: 50,
          width: 50,
          borderRadius: 50
        },
      tabBarPosition: 'bottom',
      }
    },
    );

        return <Tabs />;
    }
}

}