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>

  );

}

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

Answer 1

为了更好地理解，我更改了组件的名称：// ChoicesHeaders.jsimport 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.jsconst 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.jsimport 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.jsimport Choice from './components/Choice';import ChoicesHeader from './components/ChoicesHeader';// or any pure javascript modules available in npmimport { 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'  },});

Answer 2

它绝对不完美，但这里至少是复选框上方文本的一个工作示例。我没有将标签与复选框链接起来，而是将它们“放置”在复选框上方。在 App.js 中 - 将您的应用程序返回更改为： return (    <View>      <View style={{ flexDirection: 'row', alignItems: 'center', marginLeft:100}}>          <Text style={styles.labelStyles}>1hr</Text>          <Text style={styles.labelStyles}>2hr</Text>          <Text style={styles.labelStyles}>3hr</Text>          <Text style={styles.labelStyles}>4hr</Text>      </View>      <Choice data={data} onValueChange={handleValueChange} />    </View>  );然后只需在您的 中添加一些样式const styles，如下所示：labelStyles: {    margin:10,    fontSize:13,    color:'#afafb2'  },