为了账号安全,请及时绑定邮箱和手机立即绑定

React Native,创建多个复选框

React Native,创建多个复选框

喵喔喔 2023-08-24 15:46:49
我正在尝试为我的应用程序创建多个复选框,如下图所示。我创建了它,但面临的一个问题是它的对齐不好。这是我尝试创建它的代码,我为此创建了单独的组件,这样我就可以在多个地方使用它。我只使用 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>  );}如果有人知道如何做得更好或有任何图书馆,请提出建议。
查看完整描述

2 回答

?
慕慕森

TA贡献1856条经验 获得超17个赞

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


// 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'

  },

});

查看完整回答
反对 回复 2023-08-24
?
MMMHUHU

TA贡献1834条经验 获得超8个赞

它绝对不完美,但这里至少是复选框上方文本的一个工作示例。我没有将标签与复选框链接起来,而是将它们“放置”在复选框上方。


在 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'

  },

查看完整回答
反对 回复 2023-08-24
  • 2 回答
  • 0 关注
  • 128 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信