React Native - TouchableOpacity 按钮的颜色应该在没有地图的情况下改变

如何解决React Native - TouchableOpacity 按钮的颜色应该在没有地图的情况下改变

我只有两个按钮，我希望在按下时更改它们的背景颜色。我不想使用 map，因为只有两个按钮。我尝试了一些方法来达到我的期望，但我不知道该怎么做。

圆形按钮集：

const styles = StyleSheet.create({
  container: {
    marginBottom: 20,},});

const RoundedButtonSet = ({ firstBtn,secondBtn,contentStyle }) => {
  return (
    <View style={[styles.container,contentStyle]}>
      <RoundedButtons firstBtn={firstBtn} secondBtn={secondBtn} />
    </View>
  );
};

圆形按钮：

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',marginHorizontal: 15,height: 40,alignItems: 'center',btn: {
    flex: 1,borderWidth: 1,borderColor: colors.very_light_pink,borderRadius: 6,paddingVertical: 13,btnTextStyle: {
    fontSize: 12,fontWeight: 'normal',color: colors.very_light_pink_five,textAlign: 'center',left: {
    borderTopRighTradius: 0,borderBottomrighTradius: 0,right: {
    borderTopLefTradius: 0,borderBottomLefTradius: 0,borderLeftWidth: 0,backgroundColor: {
    backgroundColor: colors.iris,textColor: {
    color: colors.white_two,});

const RoundedButtons = ({ firstBtn,contentStyle,onPress }) => {
  const [isClicked,setIsClicked] = useState(true);

  return (
    <View style={[styles.container,contentStyle]}>
      <TouchableOpacity
        style={[styles.btn,styles.left,isClicked && styles.backgroundColor]}
        onPress={() => setIsClicked(!isClicked)}
      >
        <Text style={[styles.btnTextStyle,isClicked && styles.textColor]}>
          {firstBtn}
        </Text>
      </TouchableOpacity>
      <TouchableOpacity
        style={[styles.btn,styles.right]}
        onPress={() => setIsClicked()}
      >
        <Text style={[styles.btnTextStyle]}>{secondBtn}</Text>
      </TouchableOpacity>
    </View>
  );
};

RoundedButtons.propTypes = {
  firstBtn: Text.propTypes,secondBtn: Text.propTypes,};

export default RoundedButtons;

我应该直接给每个按钮 index 吗？我有这个想法，但问题是我不知道如何访问..

解决方法

您可以有一个简单的状态来跟踪按下了哪个按钮，并使用它来有条件地应用样式。

这是工作示例：Expo Snack

import React,{ useState } from 'react';
import { Text,View,StyleSheet,TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',marginHorizontal: 15,height: 40,alignItems: 'center',},btn: {
    flex: 1,borderWidth: 1,borderColor: 'pink',borderRadius: 6,paddingVertical: 13,btnTextStyle: {
    fontSize: 12,fontWeight: 'normal',color: 'pink',textAlign: 'center',left: {
    borderTopRightRadius: 0,borderBottomRightRadius: 0,right: {
    borderTopLeftRadius: 0,borderBottomLeftRadius: 0,borderLeftWidth: 0,backgroundColor: {
    backgroundColor: 'black',textColor: {
    color: 'white',});

const RoundedButtons = ({ firstBtn,secondBtn,contentStyle,onPress }) => {
  const [clickedBtn,setIsClicked] = useState(null);

  React.useEffect(() => {
    console.log(clickedBtn);
  },[clickedBtn]);

  return (
    <View style={[styles.container,contentStyle]}>
      <TouchableOpacity
        style={[
          styles.btn,styles.left,clickedBtn == 1 && styles.backgroundColor,]}
        onPress={() => setIsClicked(1)}>
        <Text
          style={[styles.btnTextStyle,clickedBtn == 1 && styles.textColor]}>
          firstBtn
        </Text>
      </TouchableOpacity>
      <TouchableOpacity
        style={[
          styles.btn,styles.right,clickedBtn == 2 && styles.backgroundColor,]}
        onPress={() => setIsClicked(2)}>
        <Text
          style={[styles.btnTextStyle,clickedBtn == 2 && styles.textColor]}>
          secondBtn
        </Text>
      </TouchableOpacity>
    </View>
  );
};

RoundedButtons.propTypes = {
  firstBtn: Text.propTypes,secondBtn: Text.propTypes,};

export default RoundedButtons;