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数据作为道具传递给组件而不是你可以这样做：

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

}

如果我的回答不清楚，请随时向我提出任何问题。您还可以通过以下方式获取新的道具价值：

componentWillReceiveProps(nextProps){

}

Answer 2

要将<Image />设为<Button />，您只需放置包裹<Touchable />的图片：

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

其中包含内容的

<TouchableWithoutFeedback />（和其他可触摸内容）与<Button />的自定义内容非常类似。

选中TouchableWithoutFeedback，TouchableOpacity，TouchableHighlight，选择一个符合您需求的产品。

如何在反应原生中更改按钮获取响应？

2 个答案: