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

Question

我只有两个按钮，我希望在按下时改变它们的背景颜色。我不想使用 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,
    height: 40,
  },
  btnTextStyle: {
    fontSize: 12,
    fontWeight: 'normal',
    color: colors.very_light_pink_five,
    textAlign: 'center',
  },
  left: {
    borderTopRightRadius: 0,
    borderBottomRightRadius: 0,
    borderColor: colors.very_light_pink,
  },
  right: {
    borderTopLeftRadius: 0,
    borderBottomLeftRadius: 0,
    borderLeftWidth: 0,
  },
  backgroundColor: {
    backgroundColor: colors.iris,
  },
  textColor: {
    color: colors.white_two,
  },
});

const RoundedButtons = ({ firstBtn, secondBtn, 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 吗？我有这个想法，但问题是我不知道如何访问..

Answer 1

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

这是工作示例：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,
    height: 40,
  },
  btnTextStyle: {
    fontSize: 12,
    fontWeight: 'normal',
    color: 'pink',
    textAlign: 'center',
  },
  left: {
    borderTopRightRadius: 0,
    borderBottomRightRadius: 0,
    borderColor: 'pink',
  },
  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;

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

React Native - The Color of TouchableOpacity Button Should Change Without Map

button

react-native

touchableopacity