React 本机开关不可点击答案

【问题标题】：React native switch is not clickableReact 本机开关不可点击
【发布时间】：2022-01-07 21:14:59
【问题描述】：

这里是代码

const toggleSwitch = () => {
  console.log("clicked");
  props.updateAvailability(!isEnabled);
  setIsEnabled(!isEnabled);
};

渲染部分

<View
  style={{
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
  }}
>
  <Text style={styles.name}>{props.name}</Text>
  <View style={{ flex: 1 }}>
    <Switch
      trackColor={{ false: "#767577", true: Colors.borderColor }}
      thumbColor={isEnabled ? Colors.green : "#f4f3f4"}
      ios_backgroundColor="#3e3e3e"
      onValueChange={toggleSwitch}
      value={isEnabled}
    />
  </View>
</View>;

样式部分

name: {
  fontSize: 18,
  fontWeight: "700",
  color: Colors.black1,
  marginRight: 40,
},

如果 props.name 的长度较大，则开关不起作用

图片中最后一个开关不起作用，因为 props.name

的长度

【问题讨论】：

标签： reactjs react-native jsx

【解决方案1】：

你可以用 width 代替 flex，它会起作用。

<View
style={{
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    width:"100%"// add this
  }}
>
  <Text style={styles.name}>{props.name}</Text>
  <View style={{ width:"30%" // add this and remove flex:1 }}>
    <Switch
      trackColor={{ false: "#767577", true: Colors.borderColor }}
      thumbColor={isEnabled ? Colors.green : "#f4f3f4"}
      ios_backgroundColor="#3e3e3e"
      onValueChange={toggleSwitch}
      value={isEnabled}
    />
  </View>
</View>;


name: {
 fontSize: 18,
  fontWeight: "700",
  color: Colors.black1,
  marginRight: 40,
  width:"60%"// add this
},

【讨论】：