json - 如何更改 native 响应中获取响应的按钮文本?

标签 json reactjs react-native jsx styling

我想根据服务器返回的响应更改按钮文本。这怎么可能? 我的回复如下所示

{
"responseHeader": {
"type": "314",
"status": "200",
"message": "Successfully found the profile"
},
"neighbourProfile": [{
"no_of_mutual_friends": "0",
"is_anchored": "1",
},
{
"no_of_mutual_friends": "0",
"is_anchored": "0"
}]
}

我想根据状态 is_anchored 更改按钮文本,如果为 0,我希望按钮文本为 friends 否则 add ,如何我可以这样做吗?这是我的 react 部分

return (
      <Card>
      <CardSection>
      <Image style ={styles.thumbnail_style} source={{uri : profile_image_url}} />
       <View style= {styles.thumbnailContainerStyle}>
    <Text style={styles.userStyle}>{username}</Text>
        <Image source={require('./src/Images/profession_cell.png')}/><Text style={styles.textStyle}>
      No profession to show</Text>
      <Text style={styles.friendStyle}>{no_of_mutual_friends} Mutual friends</Text>
      </View>
      <View style={styles.buttonStyle}><Button color="#00BFA5" title="Add" onPress={() =>console.log("clicked")}>
      </Button></View>
      </CardSection>

      </Card>
    );

最佳答案

根据您之前的问题,在将邻居设置为状态后:

.then((responseData) =>this.setState({neighbours: responseData.neighbourProfile}));

您可以像这样呈现按钮:

render() {
  return (
    <View>
    {
      this.state.neighbours.map( (neighbour) => {
        return (
          <Button title={neighbour.is_anchored == "0" ? 'friends' : 'add'} />
        )
      })
    }
    </View>
  );
}

这将显示反射(reflect)邻居的 is_anchored 值的简单结果。

更新1:

随着您的问题更新,那里似乎应该有一个变量 is_anchored 。那么它可能是:

<Button color="#00BFA5" title={is_anchored == "0" ? 'friends' : 'add'} onPress={() =>console.log("clicked")} />

关于json - 如何更改 native 响应中获取响应的按钮文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47918161/

相关文章:

reactjs - react dom : Incrementally change opacity of an element on click

javascript - 在带有 typescript 的 create-react-app 中使用 mozilla pdf.js

javascript - 我可以一键更改 100 个组件的状态吗?

java - 如何在java中使用JSonPath删除json键值

android - Android中基于webservice发布请求

c# - 无法对 json 响应对象执行 for 循环

android - React-native android 构建失败 : "...AAPT: error: resource android:attr/fontVariationSettings not found."

node.js - React Native 中的 Socket io

javascript - 我可以告诉 useMemo 跳过其依赖项数组中的空值吗?

javascript - axios在vue中嵌套json