在动态图像和名称中反应原生 Drawer Navigator答案

【问题标题】：React native Drawer Navigator in dynamic image and name在动态图像和名称中反应原生 Drawer Navigator
【发布时间】：2019-02-06 20:34:35
【问题描述】：

我是 react native 的新手，我想显示来自服务器的数据，我在下面的代码中使用过，但不知道如何在这里使用 fetch 方法来调用 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 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 AppDrawerNavigator 来调用 DrawerNavigator，而对于 contentComponent，我使用了 CustomDrawerContentComponent，所以我很困惑如何在这里使用 API 方法。

【问题讨论】：

标签： react-native react-native-drawer

【解决方案1】：

您可以创建一个组件并在内容组件中调用它，如下所示： 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>
  )

【讨论】：