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'
  },
});

世博小吃鏈接

Answer 2

它絕對不完美，但這里至少是復選框上方文本的一個工作示例。 而不是將標簽與復選框鏈接，我只是將它們“放置”在復選框上方。

在 App.js 中 - 將您的 App 返回更改為：

 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'
  },

對於游樂場視圖： https : //snack.expo.io/RGzGbUadq

希望這有助於給你一個想法，如果有的話！ :)