Реагировать на родной Drawer Navigator в динамическом изображении и имени - PullRequest
Новая
       60

Реагировать на родной Drawer Navigator в динамическом изображении и имени

0 голосов
/ 05 декабря 2018

Я новичок в реагировании на родной язык и хочу показать данные с сервера, который я использовал с приведенным ниже кодом, и не знаю, как использовать здесь метод извлечения для вызова 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 голосов
/ 06 февраля 2019

Вы можете создать компонент и вызвать его в компоненте контента, как показано ниже: 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>
  )
...