你如何在 React Native 中将整个选择更改为单个选择？

如何解决你如何在 React Native 中将整个选择更改为单个选择？

我们目前正在基于 React Native 进行开发。 我通过 API 文档通过 GET 请求接收数据， 我通过 MAP 方法创建了滚动视图。 所以现在我试图让选择成为可能， 但如果我选一个，那就全选了。 如果我从我的代码中选择一个，如何让你一个一个地选择？

import React,{ useEffect,useState } from "react";
import { SvgCssUri } from "react-native-svg";
import { deviceeventemitter } from "react-native";
import {
  View,StyleSheet,TouchableHighlight,Text,ScrollView,Image,} from "react-native";
import {
  widthPercentagetoDP as wp,heightPercentagetoDP as hp,} from "react-native-responsive-screen";
import axios from "axios";
import BouncyCheckBox from "react-native-bouncy-checkBox";

const Select = ({ navigation }) => {
  let bouncyCheckBoxRef = null;
  const [bodyType,setBodyType] = useState([]);
  const [standardSelected,setStandardSelected] = useState(false);
  const [isSelected,setSelected] = useState(false);
  const bodyGetData = async () => {
    let body = [];
    try {
      let config = {
        method: "get",url:
          "http://everyweardev-env.eba-azpdvh2m.ap-northeast-2.elasticbeanstalk.com/api/v1/user/bodyType/male",headers: {},};

      axios(config).then(function (response) {
        response.data.data.map((u) => {
          switch (u.bodyType) {
            case "standard":
              body.push({ bodyType: "스탠다드",imgurl: u.imgurl,key: 1 });
              break;
            case "reverseTriangle":
              body.push({ bodyType: "역삼각형",key: 2 });
              break;
            case "triangle":
              body.push({ bodyType: "삼각형",key: 3 });
              break;
            case "circle":
              body.push({ bodyType: "원형",key: 4 });
              break;
            case "hourglass":
              body.push({ bodyType: "직사각형",key: 5 });
              break;
          }
        });
        return setBodyType(body);
      });
    } catch (err) {
      console.log(err);
    }
  };
  useEffect(() => {
    const unsubscribe = navigation.addListener("focus",() => {
      bodyGetData();
    });
    return unsubscribe;
  },[navigation]);

  const onClick = (e) => {
    console.log(e);
    bodyType.map((u) => {
      switch (u.bodyType) {
        case u.bodyType === "스탠다드":
          setSelected(!isSelected);
          console.log(isSelected);
          break;
        case "역삼각형":
          setSelected(!isSelected);
          break;
      }
    });
  };

  return (
    <View style={styles.container}>
      <Text
        style={{ fontSize: wp("5.5%"),fontWeight: "bold",marginBottom: 21 }}
      >
        자신의 체형을 선택해 주세요
      </Text>
      <View style={{ flexDirection: "row",marginBottom: hp("10%") }}>
        <Text style={{ fontSize: wp("4.5%"),marginRight: wp("1%") }}>
          더 정확한 평가를 받으실 수 있습니다
        </Text>
        <Image
          source={require("../../images/smile.png")}
          style={{ marginTop: hp("0.5%") }}
        />
      </View>
      <ScrollView horizontal={true} showsHorizontalScrollIndicator={true}>
        {bodyType.map((data) => (
          <>
            <TouchableHighlight
              style={styles.bodySelect}
              value={data.bodyType}
              onPress={onClick}
              // onPress={() => bouncyCheckBoxRef?.onPress()}
            >
              <>
                <BouncyCheckBox
                  isChecked={!isSelected}
                  ref={(ref) => (bouncyCheckBoxRef = ref)}
                  size={25}
                  fillColor="black"
                  unfillColor="#FFFFFF"
                  iconStyle={{ borderColor: "white" }}
                  textStyle={{ fontFamily: "JosefinSans-Regular" }}
                  disableBuiltInState
                  onPress={onClick}
                  style={{
                    alignSelf: "flex-start",marginLeft: wp("3%"),marginTop: hp("2%"),}}
                />
                <SvgCssUri
                  uri={data.imgurl}
                  width="90%"
                  height="60%"
                  marginTop="-5%"
                  key={data.key}
                />
                <Text style={styles.bodytype}>{data.bodyType}</Text>
              </>
            </TouchableHighlight>
          </>
        ))}
      </ScrollView>
      <TouchableHighlight
        style={styles.button}
        onPress={() => {
          navigation.navigate("얼굴형 정보 입력");
        }}
        underlayColor="gray"
      >
        <>
          <Text style={styles.text}>선택 완료</Text>
        </>
      </TouchableHighlight>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    justifyContent: "center",alignItems: "center",marginTop: hp("5%"),},button: {
    justifyContent: "center",width: wp("70%"),height: hp("7%"),color: "white",backgroundColor: "black",borderRadius: 10,marginTop: hp("17%"),text: {
    color: "white",fontSize: wp("5.2%"),bodySelect: {
    marginLeft: 16,marginRight: 16,height: hp("35%"),borderRadius: 30,backgroundColor: "#ffffff",shadowColor: "#000",shadowOffset: {
      width: 0,height: 3,shadowOpacity: 0.25,shadowRadius: 3.84,elevation: 5,bodytype: {
    marginTop: hp("3%"),fontSize: wp("8%"),});
export default Select;

解决方法

此示例说明如何选择单个选项。
执行以下步骤：

  //define state to save selected value inside it
  const [selected,setSelected] = React.useState();

  //handle item onPress
  const onPress = (item) => {
      setSelected(item);
  }

  //check if item selected
  const isSelected = (item) => {
      return selected?.unique_id === item.unique_id;
  }

  //and in render function
  <ScrollView>
     {
        data.map((item,index) => {
            return(
              <ItemComponent
                onPress={() => setSelected(item)}
                style={isSelected(item) ? selectedStyle : defaultStyle}>
              
              </ItemComponent>
            )
        })
     }
  </ScrollView>

全码试吃零食here

import * as React from 'react';
import { Text,View,StyleSheet,ScrollView,TouchableOpacity} from 'react-native';


export default function App() {


  const [selected,setSelected] = React.useState();

  const data = [
    {
      unique_id : 1,text : "item one"
    },{
      unique_id : 2,text : "item two"
    },{
      unique_id : 3,text : "item three"
    },{
      unique_id : 4,text : "item four"
    }
  ];


  const onPress = (item) => {
      setSelected(item);
  }

  const isSelected = (item) => {
      return selected?.unique_id === item.unique_id;
  }


  return (
      <ScrollView>
        {
          data.map((item,index) => {
            return(
              <TouchableOpacity
                key={item.unique_id}
                onPress={() => {
                    setSelected(item);
               }}
               style={{
                 padding : 25,margin : 10,backgroundColor : isSelected(item) ? "red" : "#eee"
                 }}
               >
               <Text>{item.text}</Text>

               </TouchableOpacity>
            )
          })
        }

      </ScrollView>
  );
}