javascript - 如何在 React Native 中更改获取响应时的按钮？

Question

根据我从服务器返回的响应，我想根据以下响应中字段 friends_status 的状态更改按钮

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

我想更改按钮文本和按钮。如何用图像替换按钮

更新:

       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>

       }

Answer 1

我建议你创建自己的按钮组件，你可以将你的 friends_status 数据作为 Prop 传递给组件，你可以这样做:

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

如果我的回答不清楚，请随时向我提问。您还可以通过以下方式获得新的 Prop 值(value):

componentWillReceiveProps(nextProps){