React native 在动态图像和名称中反应本机抽屉导航器

我是react native的新手，我想展示我在下面代码中使用的服务器的数据，但我不知道如何使用herefetch方法来调用api

这是抽屉导航器：

const AppDrawerNavigator = DrawerNavigator({
Logout: {
    screen: Login,
    navigationOptions: {
        drawerLabel: 'Logout',
        drawerIcon: () => (
          <Icon name="sign-out" size={18} color="#fff" />
          )
    },
  }
  // Test: Test,
},
{
  drawerBackgroundColor: "black",

  contentComponent: CustomDrawerContentComponent,


  contentOptions: {
    activeTintColor: '#fff',
    inactiveTintColor: '#fff',
    activeBackgroundColor: '#f673d7',
    itemStyle: {
      fontSize: 18,
    },
  },
});

const apprawernavigator=pawernavigator({
注销：{
屏幕：登录，
导航选项：{
抽屉标签：“注销”，
付款人：（）=>(
)
},
}
//测试：测试，
},
{
抽屉背景颜色：“黑色”，
contentComponent:CustomDrawerContentComponent，
内容选项：{
activeTintColor:“#fff”，
InactiveIntColor:“#fff”，
activeBackgroundColor:“#f673d7”，
项目样式：{
尺码：18，
},
},
});

我想在以下组件中使用动态图像和名称：

const CustomDrawerContentComponent = (props) => (
  <View>
    <ScrollView>
      <View style={styles.profileBg}>
        <ImageBackground style={{width: Platform.OS === 'ios' ? 190 : width/1.5, height: 210}} source = {require('../images/banner-2.jpg')}>
          <View style={styles.profileHeader}>
            <TouchableHighlight>
              <View style={styles.profilepicWrap}>
                <Image style={styles.profilePic}
                  source={require('../images/Female-Avatar.png')}
                />
              </View>
            </TouchableHighlight>
            <Text style={styles.name}>Rahul Mishra</Text>
            <Text style={styles.changePassword}><Icon name="map-marker" size={16} color="#fff" style={{paddingRight:5}} /> Miamibeach, FL</Text>
          </View>
        </ImageBackground>
      </View>
      <DrawerItems
        {...props}
        getLabel = {(scene) => (
          <View style={{borderBottomWidth:1,borderBottomColor: "#fff",width:width/1.9}}>
            <Text style={{color:'#fff',fontSize:18,paddingBottom:10,paddingTop:10}}>{props.getLabel(scene)}</Text>
          </View>
        )}
      />
    </ScrollView>
  </View>
);

const CustomDrawerContentComponent=（props）=>(
拉胡尔·米什拉
迈阿密海滩，佛罗里达州
(
{props.getLabel（场景）}
)}
/>
);

---

在上面的代码中，我使用const AppDrawerNavigator来调用DrawerNavigator，而对于contentComponent，我使用CustomDrawerContentComponent，所以我在这里非常困惑如何在这里使用API方法。

您可以创建一个组件并在内容组件中调用它，如下所示： DrawerUserDetail是一个独立的组件，您可以像我们通常所做的那样在那里编写任何代码……这对我来说是可行的

contentComponent: (props) => (
    <View>
      <ScrollView>
        <DrawerUserDetail  navigation={props.navigation} />
        <DrawerItems
          {...props}
          getLabel = {(scene) => (
            <View style={{borderBottomWidth:0.5,borderBottomColor: "grey",width:width/1.9}}>
              <Text style={{color:'#333',fontSize:18,paddingBottom:14,paddingTop:14}}>{props.getLabel(scene)}</Text>
            </View>
          )}
        />
        <DrawerCustom  navigation={props.navigation} />
      </ScrollView>
    </View>
  )

contentComponent:（道具）=>(
(
{props.getLabel（场景）}
)}
/>
)