问题描述
我们目前正在基于 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>
);
}