React native React Native中的过滤器按钮

我试着让它像YouTube的过滤按钮一样工作。在React Native via Republicable component中，哪一个按钮按下了另一个按钮禁用。我怎样才能做到这一点呢？
PS:如果我使用了错误的技术术语，如果不是呼叫过滤器按钮，请纠正我

---

或者与此类似，我希望它的功能类似于单选按钮，这意味着一个按钮单击另一个按钮是禁用的，但看起来像使用React native的芯片按钮。

---

您可以像下面这样创建一个切换按钮并切换样式，基本上我们使用变量设置背景颜色和文本颜色，我添加了一个回调，您可以在主组件中使用它

const Filters = ({ data, onValueChange }) => {
  const [selectedIndex, setSelectedIndex] = useState(-1);

  return (
    <View style={{ flexDirection: 'row' }}>
      {data.map((x, i) => (
        <FilterButton
          text={x.title}
          id={i}
          selectedIndex={selectedIndex}
          callback={(id) => {
            setSelectedIndex(id);
            if (onValueChange) {
              onValueChange(id);
            }
          }}
        />
      ))}
    </View>
  );
};

const FilterButton = ({ callback, text, id, selectedIndex }) => {
  const clicked = selectedIndex === id;
  return (
    <TouchableOpacity
      style={[
        { borderRadius: 20, borderColor: 'black', borderWidth: 2, padding: 10 },
        { backgroundColor: clicked ? 'black' : 'white' },
      ]}
      onPress={() => {
        callback(id);
      }}>
      <Text style={{ color: clicked ? 'white' : 'black' }}>
        {text}
      </Text>
    </TouchableOpacity>
  );
};

const过滤器=（{data，onValueChange}）=>{
常量[selectedIndex，setSelectedIndex]=useState（-1）；
返回(
{data.map（（x，i）=>(
{
设置所选索引（id）；
如果（onValueChange）{
onValueChange（id）；
}
}}
/>
))}
);
};
常量过滤器按钮=（{回调，文本，id，selectedIndex}）=>{
const clicked=selectedIndex==id；
返回(
{
回拨（id）；
}}>
{text}
);
};

用法

alert（id）}/>

您需要创建一个按钮栏，然后我们需要为此按钮栏创建一个可重复使用的按钮。这里有一个例子

export default function App() {
  const [text, setText] = React.useState('');
  const [filters, setFilters] = React.useState([
    { label: 'ALL' },
    { label: 'A' },
    { label: 'B' },
    { label: 'C' },
  ]);
  const [selected, setSelected] = React.useState(filters[0]);

  const callback = (data) => {
    if (selected === data) return setSelected(filters[0]);
    setSelected(data);
  };

  return (
    <View style={styles.container}>
      {filters.map((filter) => (
        <FilterButton
          selected={filter === selected}
          disabled={filter !== selected && selected !== filters[0] && filter !== filters[0]}
          data={filter}
          callback={callback}
        />
      ))}
    </View>
  );
}

const FilterButton = ({ callback, selected, disabled, data }) => {
  return (
    <TouchableOpacity
      style={[
        styles.filterButton,
        { backgroundColor: disabled? 'lightgrey':(selected ? 'black' : 'white') },
      ]}
      onPress={() => {
        if (callback && !disabled) {
          callback(data);
        }
      }}>
      <Text style={{ color: selected ? 'white' : 'black' }}>
        {data.label}
      </Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection:'row',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  filterButton: {
    borderRadius: 15, padding: 8, paddingLeft:24, paddingRight:24,
    marginRight:8
  },
});

导出默认函数App（）{
const[text，setText]=React.useState（“”）；
const[filters，setFilters]=React.useState([
{label:'ALL'}，
{label:'A'}，
{标签：'B'}，
{label'C'}，
]);
const[selected，setSelected]=React.useState（过滤器[0]）；
常量回调=（数据）=>{
if（selected==data）返回setSelected（filters[0]）；
（数据）；
};
返回(
{filters.map（（filter）=>(
))}
);
}
常量FilterButton=（{回调，已选择，已禁用，数据}）=>{
返回(
{
如果（已禁用回调&&！）{
回调（数据）；
}
}}>
{data.label}
);
};
const styles=StyleSheet.create({
容器：{
flexDirection:“行”，
背景颜色：“#ecf0f1”，
填充：8，
},
过滤器按钮：{
边界半径：15，填充：8，填充左：24，填充右：24，
marginRight:8
},
});

---

这里是expo链接

无意冒犯，但您的代码与YouTube的过滤按钮功能不同。我可以单击并将样式更改为多个不同的按钮。好的，那么你想有一个完整的按钮列表并突出显示一个吗？我想让它像单选按钮一样工作，这意味着一个按钮单击另一个按钮是禁用的，但看起来像使用React native的芯片按钮。你可以体验Youtube按钮，一个按钮点击另一个按钮它不是点击，但所有按钮都存在。使用状态（-1）将默认索引放在这里谢谢你的回答，我很感激。

export default function App() {
  const [text, setText] = React.useState('');
  const [filters, setFilters] = React.useState([
    { label: 'ALL' },
    { label: 'A' },
    { label: 'B' },
    { label: 'C' },
  ]);
  const [selected, setSelected] = React.useState(filters[0]);

  const callback = (data) => {
    if (selected === data) return setSelected(filters[0]);
    setSelected(data);
  };

  return (
    <View style={styles.container}>
      {filters.map((filter) => (
        <FilterButton
          selected={filter === selected}
          disabled={filter !== selected && selected !== filters[0] && filter !== filters[0]}
          data={filter}
          callback={callback}
        />
      ))}
    </View>
  );
}

const FilterButton = ({ callback, selected, disabled, data }) => {
  return (
    <TouchableOpacity
      style={[
        styles.filterButton,
        { backgroundColor: disabled? 'lightgrey':(selected ? 'black' : 'white') },
      ]}
      onPress={() => {
        if (callback && !disabled) {
          callback(data);
        }
      }}>
      <Text style={{ color: selected ? 'white' : 'black' }}>
        {data.label}
      </Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection:'row',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  filterButton: {
    borderRadius: 15, padding: 8, paddingLeft:24, paddingRight:24,
    marginRight:8
  },
});