React 本机开关不可点击

Question

here is the code

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

Render part

<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>;

style part

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

if the props.name have bigger length then the switch is not working

in the picture last switch is not working because the length of the props.name

Answer 1

You can use width instead of flex and it will work.

<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
},