私は反応ネイティブで初めてで、以下のコードで使用したサーバーからのデータを表示したいのですが、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>
);
上記のコードでは、DrawerNavigator を呼び出すために const AppDrawerNavigator を使用し、contentComponent には CustomDrawerContentComponent を使用したため、ここで API メソッドを使用する方法が非常に混乱しています。