React Native，创建多个复选框

Question

我正在尝试为我的应用程序创建多个复选框，如下图所示。我创建了它，但面临的一个问题是它的对齐不好。这是我尝试创建它的代码，我为此创建了单独的组件，这样我就可以在多个地方使用它。我只使用 facebook 的代码，看起来很糟糕。有没有任何库可以做到这一点或更好的方法？与图像相比，它看起来不太好。//component codefunction 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.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'

  },

});

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'

  },