javascript - React Native，创建多个复选框

Question

我正在尝试为我的应用程序创建多个复选框，如下图所示。我创建了它，但面临的一个问题是它的对齐不好。

这是我尝试创建它的代码，我为此创建了单独的组件，这样我就可以在多个地方使用它。我只使用 facebook 的代码，看起来很糟糕。有没有任何库可以做到这一点或更好的方法？与图像相比，它看起来不太好。

//component code

function Choice({data, onValueChange, style}) {
  const [selectedIndex, setSelectedIndex] = useState(-1);

  const FilterButton = ({
    callback,
    text,
    id,
    selectedIndex,
    btnstyles,
    btnTxtStyles,
    btnstylesSelect,
    btnTxtStylesSelect,
    imageStyle,
  }) => {
    const clicked = selectedIndex === id;
    return (
      <View style={{flexDirection: 'row'}}>
        {!clicked ? (
          <>
            <TouchableOpacity
              style={[btnstyles]}
              onPress={() => {
                callback(id);
              }}></TouchableOpacity>
          </>
        ) : (
          <>
            <TouchableOpacity
              style={btnstylesSelect}
              onPress={() => {
                callback(id);
              }}>
              <Image source={imagePath.tick} style={{borderRadius: 5}} />
            </TouchableOpacity>
          </>
        )}
      </View>
    );
  };

  return (
    <View style={[style]}>
      {data.map((x, i) => (
        <FilterButton
          text={x.title}
          id={i}
          btnstyles={x.btnstyles}
          btnTxtStyles={x.btnTxtStyles}
          selectedIndex={selectedIndex}
          btnTxtStylesSelect={x.btnTxtStylesSelect}
          imageStyle={x.imageStyle}
          btnstylesSelect={x.btnstylesSelect}
          callback={(id) => {
            setSelectedIndex(id);
            if (onValueChange) {
              onValueChange(id);
            }
          }}
        />
      ))}
    </View>
  );
}

//Main code

 <View
              style={{
                flexDirection: 'row',
              }}>
              <Text style={{...styles.time1, ...commonStyles.fontSize14}}>
                1hr
              </Text>
              <Text style={{...styles.time2, ...commonStyles.fontSize14}}>
                2hr
              </Text>
              <Text style={{...styles.time2, ...commonStyles.fontSize14}}>
                3hr
              </Text>
              <Text style={{...styles.time2, ...commonStyles.fontSize14}}>
                4hr
              </Text>
            </View>
          

如果有人知道如何做得更好或有任何库，请提出建议。

Answer 1

为了更好地理解，我更改了组件的名称:

// ChoicesHeaders.js

import Checkbox from './CheckBox';

const ChoicesHeaders = ({
  headersName,
  choicesHeaderStyles,
  choicesHeaderItemStyles,
}) => {
  return (
    <View style={choicesHeaderStyles}>
      {headersName.map((header) => (
        <View style={choicesHeaderItemStyles}>
          <Text>{header}</Text>
        </View>
      ))}
    </View>
  );
};

export default ChoicesHeaders;

// Checkbox.js

const Checkbox = ({
  id,
  btnstyles,
  btnstylesSelect,
  checked,
  selectedIndex,
  onCheckboxChange,
}) => {
  return selectedIndex !== id ? (
    <TouchableOpacity
      style={btnstyles}
      onPress={() => {
        onCheckboxChange(id);
      }}></TouchableOpacity>
  ) : (
    <TouchableOpacity
      style={btnstylesSelect}
      onPress={() => {
        onCheckboxChange(id);
      }}></TouchableOpacity>
  );
};

export default Checkbox;

// Choice.js

import Checkbox from './CheckBox';

const Choice = ({
  callback,
  text,
  btnstyles,
  btnTxtStyles,
  btnstylesSelect,
  btnTxtStylesSelect,
  onValueChange,
  choicesCount
}) => {
  const [selectedIndex, setSelectedIndex] = React.useState(-1);
  const handleCheckboxChange = (id) => {
    setSelectedIndex(id)
    if (onValueChange) {
      onValueChange(text, id);
    }
  };

  return (
    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
      <View style={btnTxtStyles}>
        <Text>{text}</Text>
      </View>
      {Array.from({length: choicesCount}).map((item, index) => (
      <Checkbox
        id={index}
        btnstyles={btnstyles}
        btnstylesSelect={btnstylesSelect}
        selectedIndex={selectedIndex}
        onCheckboxChange={handleCheckboxChange}
      />
      ))}
    </View>
  );
};

export default Choice;

// App.js

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


const data = [
  { title: 'Instagram', /* extra properties(e.g. keys to save in db) */},
  { title: 'Facebook',  },
  { title: 'Twitter',   },
  { title: 'Linkdin',   },
];

const choicesHeaders=['1 hr', '2 hr', '3 hr', '4 hr'];

export default function App() {
  const handleValueChange = (socialMediaName, checkboxId) => {
    // do what ever you want with this two
  };

  return (
    <View style={styles.container}>
      <ChoicesHeader
        headersName={choicesHeaders}
        choicesHeaderStyles={styles.choicesHeader}
        choicesHeaderItemStyles={styles.choicesHeaderItem}
      />
      {data.map((x) => (
        <Choice
          text={x.title}
          btnTxtStyles={styles.btnTxtStyles}
          btnstyles={styles.btnstyles}
          btnstylesSelect={styles.btnstylesSelect}
          onValueChange={handleValueChange}
          choicesCount={choicesHeaders.length}
        />
      ))}
    </View>
  );
}

const checkBoxBaseStyles = {
    height: 40,
    width: 40,
    margin: 10,
};

const labelDimentions = {
  width: 100
};

const styles = StyleSheet.create({
  btnstyles: {
    ...checkBoxBaseStyles,
    borderWidth: 1,
    borderColor: 'orange',
  },
  btnstylesSelect: {
    ...checkBoxBaseStyles,
    backgroundColor: 'orange',
  },
  btnTxtStyles: {
    ...labelDimentions,
  },
  choicesHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    marginLeft: labelDimentions.width
  },
  choicesHeaderItem: {
    ...checkBoxBaseStyles,
    textAlign: 'center'
  },
});

expo snack link