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无法在标签呈现之前获取网址

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 />;
    }
}

}

反应导航 - 来自AsyncStorage的自定义图标

1 个答案: