2017-12-21 44 views
1

私は応答以下変更する方法反応ネイティブのフェッチレスポンスのボタン?私の応答に基づいて

{ 
    "responseHeader": { 
    "type": "314", 
    "status": "200", 
    "message": "Successfully found the profile" 
    }, 
    "neighbourProfile": [{ 
     "friends_status": "210", 
    }, 
    { 
     "friends_status": "217", 
    }, 
    { 
     "friends_status": "219", 
    }, 
    { 
     "friends_status": "200", 
    } 
    ] 
} 

からフィールドfriends_statusのステータスにボタンを変更したいサーバーから返された私は、ボタンのテキストだけでなく、button.Howを変更したいですI画像更新

でボタンを置き換える:

 if(neighbours.friend_status == '219'){ 
      <Button color={'#00BFA5'} title="Add" 
      onPress={console.log('clicked')}/> 
     } 
     else if(neighbours.friend_status == '208'){ 
      <Button color={'#ffffff'} title={"Add"} onPress={console.log('clicked')}/> 
     } 
     else if(neighbours.friend_status == '216') 
     { 

      <TouchableOpacity> 
      <Image source={require('../Images/ic_reject.png')}/> 
      <Image source={require('../Images/ic_request_accept.png')}/> 
      </TouchableOpacity> 

     } 
     else if(neighbours.friend_status == '221'){ 

      <TouchableOpacity> 
      <Image source={require('../Images/ic_reject.png')}/> 
      <Image source={require('../Images/ic_request_accept.png')}/> 
      </TouchableOpacity> 

     } 

答えて

0

<Button />として<Image />を作るために、あなただけの<Touchable />をラップして画像を配置することができます:

<View style={styles.buttonStyle}> 
    <TouchableWithoutFeedback onPress={() => {}}> 
    <Image source={{uri: YOUR_IMAGE_URI}} /> 
    </TouchableWithoutFeedback> 
</View> 

<TouchableWithoutFeedback />(および他のTouchables)その中にコンテンツに、と非常にまね<Button />にありますカスタムコンテンツ。

TouchableWithoutFeedbackTouchableOpacityTouchableHighlightのいずれかを選択してください。

+0

'場合(neighbours.friend_status == '216') \t \t \t { \t \t \t \tリターン( \t \t \t \t:そして、あなたはまたして新しい小道具値をキャッチすることができます \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t) \t \t \t} '私はこのような試みたが、エラー何のエラー – anu

+0

を持っていますあなたが持っているメッセージ? – Val

+0

あなたの2番目の ''の 'source'は中括弧の末尾が正しくありません'} ' – Val

1

私はあなたがこれを行うことができますよりも、コンポーネントへの小道具としてごfriends_statusデータを渡すことができ、あなたがあなた自身のボタンコンポーネントを作成することをお勧め:私の答えはでない場合

renderButtonContent(){ 
if (this.props.friend_status === xxx) { 
    return (
     <TouchableOpacity> 
      <Image /> 
     </TouchableOpacity> 
    ) 
} else { 
    return (
     <TouchableOpacity> 
      <Text> add</Text> 
     </TouchableOpacity> 
    ) 
} 

}

私には何の質問もしないでください。

componentWillReceiveProps(nextProps){ 

}

関連する問題