以动态图像和名称反应本机Drawer Navigator

时间:2018-12-05 11:39:01

标签: react-native react-native-drawer

我是React Native的新手,我想显示与以下代码一起使用的服务器中的数据,并且不知道如何在这里使用提取方法来调用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​​方法。

1 个答案:

答案 0 :(得分:0)

您可以创建一个组件,然后在内容组件中调用它,如下所示: DrawerUserDetail是一个单独的组件,您可以像往常一样在此编写任何代码...对我有用。

df1['common'] = (a / b) * 100
print(df1)