我正在嘗試為我的應(yīng)用程序創(chuàng)建多個(gè)復(fù)選框，如下圖所示。我創(chuàng)建了它，但面臨的一個(gè)問題是它的對齊不好。這是我嘗試創(chuàng)建它的代碼，我為此創(chuàng)建了單獨(dú)的組件，這樣我就可以在多個(gè)地方使用它。我只使用 facebook 的代碼，看起來很糟糕。有沒有任何庫可以做到這一點(diǎn)或更好的方法？與圖像相比，它看起來不太好。//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>  );}如果有人知道如何做得更好或有任何圖書館，請?zhí)岢鼋ㄗh。