如何更改 OnPress 上此圆形按钮的边框颜色？

Question

如果我按下这些按钮中的任何一个，它的边框颜色应该改变，其余的应该没有颜色。每次我按下不同的按钮时，只有它的边框颜色应该改变，所有其他按钮应该没有颜色。这是我想要的图像：-

<View
          style={{
            flexDirection: 'row',
            justifyContent: 'space-evenly',
          }}>
          <TouchableOpacity style={styles.Circlebtn}>
            <Icon.MaterialCommunityIcons name="calendar-today" size={24} />
            <Text>Day to day</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.Circlebtn}>
            <Icon.MaterialCommunityIcons name="alarm-light" size={24} />
            <Text>Emergency</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.mainview}>
          <TouchableOpacity style={styles.Circlebtn}>
            <Icon.MaterialCommunityIcons name="hammer-wrench" size={24} />
            <Text>Planned Works</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.Circlebtn}>
            <Icon.Foundation name="clipboard-pencil" size={24} />
            <Text>Survey</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.mainview}>
          <TouchableOpacity style={styles.Circlebtn}>
            <Icon.FontAwesome name="users" size={24} />
            <Text>Meeting</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.Circlebtn}>
            <Icon.Entypo name="dots-three-horizontal" size={24} />
            <Text>Others</Text>
          </TouchableOpacity>
        </View>

Answer 1

您可以向您的状态添加一个变量来保存您按下的按钮。比方说

index = 0

之后，每次点击按钮，都可以更新状态。比方说

const [index, setIndex] = useState(0);

<Button onClick={() => setIndex(1)} />
<AnotherButton onClick={() => setIndex(2)} />

如果你根据这个index变量检查每个按钮的样式，你可以给你的按钮添加边框。

<Button style={{ borderColor: index === 1 ? 'green' : 'black' }} />
<AnotherButton style={{ borderColor: index === 2 ? 'green' : 'black' }} />

您可以尝试这些步骤来为您的按钮添加边框。希望效果好

如何更改 OnPress 上此圆形按钮的边框颜色？

How to change border color of this circular Button on OnPress?

javascript

reactjs

react-native

react-native-android