如何在 React Native 中对特定按钮应用不同的样式

Question

我在一张图像上应用了不同的滤镜叠加层。我想根据用户按下的按钮应用特定的样式。我怎样才能做到这一点？

现在我正在使用三元条件，但它只适用于一种样式

       <Image
          source={{
            uri: source,
          }}
          style={styles.filterImage}
          resizeMode="contain"
        />
        <View
          style={
           filter1 ? styles.filterOverlay1 : styles.defaultFilterOverlay
          }

我为不同的滤镜叠加制作了多个状态

  const [filter1, setFilter1] = useState(false);
  const [filter2, setFilter2] = useState(false);
  const [filter3, setFilter3] = useState(false);
  const [filter4, setFilter4] = useState(false);
  const [filter5, setFilter5] = useState(false);
  const [filter6, setFilter6] = useState(false);
  const [filter7, setFilter7] = useState(false);

当用户按下按钮时，它会将状态设置为 true


           <TouchableOpacity
              style={styles.filterTags}
              onPress={() => setFilter1(true)}
            >
              <Text style={{ color: "#fff", fontWeight: "bold" }}>
                Filter 1
              </Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.filterTags}
              onPress={() => setFilter2(true)}
            >
              <Text style={{ color: "#fff", fontWeight: "bold" }}>
                Filter 2
              </Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.filterTags}
              onPress={() => setFilter3(true)}
            >
              <Text style={{ color: "#fff", fontWeight: "bold" }}>
                Filter 3
              </Text>
            </TouchableOpacity>

Answer 1

你可以像这样使用三元条件

style={
       filter1 ? styles.filterOverlay1 : filter2 ? styles.filterOverlay2 :  filter3 ? styles.filterOverlay3 : filter4 ? styles.filterOverlay4 :styles.defaultFilterOverlay
      }

或者您可以使用这样的过滤器

const [selectedFilter, setSelectedFilter] = useState(styles.defaultFilterOverlay);

在 TouchableOpacity 按下时

<TouchableOpacity
          style={styles.filterTags}
          onPress={() => setSelectedFilter(styles.filterOverlay1)}
        >

并设置所选过滤器

 style={ selectedFilter  }

如何在 React Native 中对特定按钮应用不同的样式

How to apply different styles to specific button in react native

javascript

conditional-operator

react-native