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

Question

我们目前正在基于 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: "역삼각형", imgUrl: u.imgUrl, key: 2 });
              break;
            case "triangle":
              body.push({ bodyType: "삼각형", imgUrl: u.imgUrl, key: 3 });
              break;
            case "circle":
              body.push({ bodyType: "원형", imgUrl: u.imgUrl, key: 4 });
              break;
            case "hourglass":
              body.push({ bodyType: "직사각형", imgUrl: u.imgUrl, 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",
    alignItems: "center",
    width: wp("70%"),
    height: hp("7%"),
    color: "white",
    backgroundColor: "black",
    borderRadius: 10,
    marginTop: hp("17%"),
  },
  text: {
    color: "white",
    fontSize: wp("5.2%"),
    fontWeight: "bold",
  },

  bodySelect: {
    marginLeft: 16,
    marginRight: 16,
    width: wp("70%"),
    height: hp("35%"),
    alignItems: "center",
    borderRadius: 30,
    backgroundColor: "#ffffff",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 3,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  bodytype: {
    marginTop: hp("3%"),
    fontWeight: "bold",
    fontSize: wp("8%"),
  },
});
export default Select;

Answer 1

这个例子解释了如何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>
  );
}

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

How do you change the entire selection to individual choices in React Native?

android

boundary

android-checkbox

react-native