react-native - 使用 React-Native 实现类似 Instagram 的按钮，

Question

我正在尝试在我的 React-Native 应用程序中实现类似 Instagram 的按钮，但我无法做到，我尝试使用 if-else 语句和 switch-case 三元运算符“？”。

if (age < 3) {
  return <View></View>;
} else if (age < 18) {
  return  <View></View>;
} else if (age < 100) {
  return <View></View>;
} else {
  return <View></View>;
}




switch (x) {
  case 'value1': // if (x === 'value1')
       return     <View></View>
  case 'value2': // if (x === 'value2')
    return <View></View>
  default:
   return <View></View>
}



let message = (login == 'Employee') ? 'Hello' :
  (login == 'Director') ? 'Greetings' :
  (login == '') ? 'No login' :
  '';

我使用了上述三种方法，但没有得到所需的输出，如果用户单击特定帖子，我想以绿色显示类似按钮，在其余所有条件下，我想以白色显示它，

userId:1,
items: [{
        "id": 6,
        "user_id": 1
    }, {
        "id": 5,
        "user_id": 1
    }, {
        "id": 4,
        "user_id": 1
    }, {
        "id": 3,
        "user_id": 1
    }, {
        "id": 2,
        "user_id": 2        
    }, {
        "id": 1,
        "user_id": 2        
    }]



 all_Posts_like_Status_Array:  [
{"description": " Hi good evening", "id": 6, "like_status": "like", "likes_user_id": 3, "post_id": 6, "user_id": 1}, 
{"description": " Hi good evening", "id": 6, "like_status": "like", "likes_user_id": 4, "post_id": 6, "user_id": 1},
{"description": " Hi good evening", "id": 6, "like_status": "like", "likes_user_id": 8, "post_id": 6, "user_id": 1}, 
{"description": " Hi good evening", "id": 6, "like_status": "like", "likes_user_id": 9, "post_id": 6, "user_id": 1}, 
{"description": " Hi good evening", "id": 6, "like_status": "like", "likes_user_id": 9, "post_id": 6, "user_id": 1}, 
{"description": " Modified bike", "id": 5, "like_status": "like", "likes_user_id": 9, "post_id": 5, "user_id": 1}, 
{"description": " Modified bike", "id": 5, "like_status": "unlike", "likes_user_id": 3, "post_id": 5, "user_id": 1}, 
{"description": " Modified bike", "id": 5, "like_status": "like", "likes_user_id": 4, "post_id": 5, "user_id": 1}, 
{"description": " Modified bike", "id": 5, "like_status": "like", "likes_user_id": 8, "post_id": 5, "user_id": 1}, 
{"description": " Good morning", "id": 4, "like_status": "like", "likes_user_id": 2, "post_id": 4, "user_id": 1}, 
{"description": " Good morning", "id": 4, "like_status": "like", "likes_user_id": 1, "post_id": 4, "user_id": 1}, 
{"description": " Good morning", "id": 4, "like_status": "like", "likes_user_id": 3, "post_id": 4, "user_id": 1}, 
{"description": " Good morning", "id": 4, "like_status": "like", "likes_user_id": 4, "post_id": 4, "user_id": 1}, 
{"description": " Good morning", "id": 4, "like_status": "like", "likes_user_id": 8, "post_id": 4, "user_id": 1}, 
{"description": " Good morning", "id": 4, "like_status": "like", "likes_user_id": 9, "post_id": 4, "user_id": 1}, 
{"description": " Hi good morning", "id": 3, "like_status": "like", "likes_user_id": 9, "post_id": 3, "user_id": 1}, 
{"description": " Hi good morning", "id": 3, "like_status": "unlike", "likes_user_id": 1, "post_id": 3, "user_id": 1}, 
{"description": " Hi good morning", "id": 3, "like_status": "like", "likes_user_id": 3, "post_id": 3, "user_id": 1}, 
{"description": " Hi good morning", "id": 3, "like_status": "like", "likes_user_id": 4, "post_id": 3, "user_id": 1}, 
{"description": " Hi good morning", "id": 3, "like_status": "like", "likes_user_id": 8, "post_id": 3, "user_id": 1}, 
{"description": " Hi good day", "id": 2, "like_status": "like", "likes_user_id": 2, "post_id": 2, "user_id": 2}, 
{"description": " Hi good day", "id": 2, "like_status": "unlike", "likes_user_id": 1, "post_id": 2, "user_id": 2}, 
{"description": " Hi good day", "id": 2, "like_status": "like", "likes_user_id": 3, "post_id": 2, "user_id": 2}, 
{"description": " Hi good day", "id": 2, "like_status": "like", "likes_user_id": 4, "post_id": 2, "user_id": 2}, 
{"description": " Hi good day", "id": 2, "like_status": "like", "likes_user_id": 8, "post_id": 2, "user_id": 2}, 
{"description": " Hi good day", "id": 2, "like_status": "unlike", "likes_user_id": 9, "post_id": 2, "user_id": 2}, 
{"description": " Good evening", "id": 1, "like_status": "like", "likes_user_id": 9, "post_id": 1, "user_id": 2}, 
{"description": " Good evening", "id": 1, "like_status": "unlike", "likes_user_id": 2, "post_id": 1, "user_id": 2}, 
{"description": " Good evening", "id": 1, "like_status": "like", "likes_user_id": 1, "post_id": 1, "user_id": 2}, 
{"description": " Good evening", "id": 1, "like_status": "like", "likes_user_id": 3, "post_id": 1, "user_id": 2}, 
{"description": " Good evening", "id": 1, "like_status": "like", "likes_user_id": 4, "post_id": 1, "user_id": 2}, 
{"description": " Good evening", "id": 1, "like_status": "like", "likes_user_id": 8, "post_id": 1, "user_id": 2}
]









const all_Posts_like_Status = all_Posts_like_Status_Array.filter((all_Posts_Array) => (all_Posts_Array.id == items.id)) // && all_Posts_Array.likes_user_id == userId




using If-else condition:
{all_Posts_like_Status.map((all_like_Status) => {
//  (all_like_Status.likes_user_id == userId && all_like_Status.like_status == 'like')

    if (all_like_Status.likes_user_id == userId && all_like_Status.like_status == 'like') {
      return (
        <View style={styles.socialBarSection}>
          <TouchableOpacity style={styles.socialBarButton} onPress={() => { this.submit_like_Button(items.id) }}>
            <Icon name="thumbs-up" size={18} color="#66ff00" />
            {/* <Text style={styles.socialCount}>78 {following_like_Status.id}{items.id}</Text> */}
            {
              like_Count_Array.map((like_Ct) => <Text style={styles.socialCount}>{like_Ct.likeCount}</Text>)
            }
          </TouchableOpacity>
        </View>
      )
    }
     else if (all_like_Status.likes_user_id == userId && all_like_Status.like_status == 'unlike') {
      return (
        <View style={styles.socialBarSection}>
          <TouchableOpacity style={styles.socialBarButton} onPress={() => { this.submit_like_Button(all_like_Status.id) }}>
            <Icon name="thumbs-up" size={18} color="#ffffff" />
            {/* <Text style={styles.socialCount}>78{all_like_Status.id}</Text> */}
            {
              like_Count_Array.map((like_Ct) => <Text style={styles.socialCount}>{like_Ct.likeCount}</Text>)
            }
          </TouchableOpacity>
        </View>
      )
    } 
    else if (all_like_Status.likes_user_id == userId && all_like_Status.like_status == null) {
      return (
        <View style={styles.socialBarSection}>
          <TouchableOpacity style={styles.socialBarButton} onPress={() => { this.submit_like_Button(all_like_Status.id) }}>
            <Icon name="thumbs-up" size={18} color="#ffffff" />
            {/* <Text style={styles.socialCount}>78{all_like_Status.id}</Text> */}
            {
              like_Count_Array.map((like_Ct) => <Text style={styles.socialCount}>{like_Ct.likeCount}</Text>)
            }
          </TouchableOpacity>
        </View>
      )
    } 
    else if (all_like_Status.likes_user_id == null && all_like_Status.like_status == null) {
      return (
        <View style={styles.socialBarSection}>
          <TouchableOpacity style={styles.socialBarButton} onPress={() => { this.submit_like_Button(all_like_Status.id) }}>
            <Icon name="thumbs-up" size={18} color="#ffffff" />
            {/* <Text style={styles.socialCount}>78{all_like_Status.id}</Text> */}
            {
              like_Count_Array.map((like_Ct) => <Text style={styles.socialCount}>{like_Ct.likeCount}</Text>)
            }
          </TouchableOpacity>
        </View>
      )
    } 
    else {
      return (
        <View style={styles.socialBarSection}>
          <TouchableOpacity style={styles.socialBarButton} onPress={() => { this.submit_like_Button(all_like_Status.id) }}>
            <Icon name="thumbs-up" size={18} color="#ffffff" />
            {/* <Text style={styles.socialCount}>78 {all_like_Status.id}</Text> */}
            {
              like_Count_Array.map((like_Ct) => <Text style={styles.socialCount}>{like_Ct.likeCount}</Text>)
            }
          </TouchableOpacity>
        </View>
      )
    }

}







Switch-case :

// all like buton switch-case
{all_Posts_like_Status.map((all_like_Status) => {
//  (all_like_Status.likes_user_id == userId && all_like_Status.like_status == 'like')

switch (all_like_Status.likes_user_id) {
  case userId: return <View style={styles.socialBarSection}>
    <TouchableOpacity style={styles.socialBarButton} onPress={() => { this.submit_like_Button(items.id) }}>
      <Icon name="thumbs-up" size={18} color="#66ff00 " />
      {/* <Text style={styles.socialCount}>78 {following_like_Status.id}{items.id}</Text> */}
      {
        like_Count_Array.map((like_Ct) => <Text style={styles.socialCount}>{like_Ct.likeCount}</Text>)
      }
    </TouchableOpacity>
  </View>;    

  default: return <View style={styles.socialBarSection}>
    <TouchableOpacity style={styles.socialBarButton} onPress={() => { this.submit_like_Button(items.id) }}>
      <Icon name="thumbs-up" size={18} color="#ffffff" />
      {/* <Text style={styles.socialCount}>78 {following_like_Status.id}{items.id}</Text> */}
      {
        like_Count_Array.map((like_Ct) => <Text style={styles.socialCount}>{like_Ct.likeCount}</Text>)
      }
    </TouchableOpacity>
  </View>;


  }

 })
}




<img>
[![required output ][1]][1]






[![enter image description here][1]][1]})

---

我无法显示按钮的默认状态，在显示默认状态时我正在获取剩余的用户详细信息，
一旦检查我的上述代码，请告诉我是否做错了什么，如果我做错了什么，请告诉我。

如果有人知道任何替代方法，请告诉我...

---

标签： react-native