React本机无效钩子调用

Question

我正在构建我的第一个react原生应用程序。当我在模拟器上打开页面时，我会得到

"无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一：

1. React和渲染器的版本可能不匹配(例如React DOM(
2. 你可能违反了胡克规则
3. 同一应用程序中可能有多个React副本看见https://reactjs.org/link/invalid-hook-call有关如何调试和修复此问题的提示。">

这是我的代码-

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, FlatList, Image, Button, Pressable, ScrollView,  } from 'react-native';
import React, {useState, useEffect, useCallback, Component} from 'react'
import { TextInput } from 'react-native-gesture-handler';
import RNPickerSelect from 'react-native-picker-select';
import * as ImagePicker from 'expo-image-picker';
import DateTimePickerModal from "react-native-modal-datetime-picker";
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import { faSquare } from '@fortawesome/free-regular-svg-icons';





export default function Profile(props) {

const [sports, setSports] = useState(false) 
const [video, setVideo] = useState(false)
const [read, setRead] = useState(false)
const [travel, setTravel] = useState(false)
const [tv, setTv] = useState(false)
const [fish, setFish] = useState(false)
const [craft, setCraft] = useState(false)
const [collect, setCollect] = useState(false)
const [music, setMusic] = useState(false)
const [hike, setHike] = useState(false)
const [art, setArt] = useState(false)
const [cook, setCook] = useState(false) 
const cityMessage = props.navigation.getParam("message", null)

let countries = [
{ label: "Afghanistan", value: "Afghanistan"},
{ label: "Akrotiri", value: "Akrotiri"},
{ label: "Albania", value: "Albania"},
{ label: "Algeria", value: "Algeria"},
{ label: "American Samoa", value: "American Samoa"},
{ label: "Andorra", value: "Andorra"},
{ label: "Angola", value: "Angola"},
{ label: "Anguilla", value: "Anguilla"},
{ label: "Antigua And Barbuda", value: "Antigua And Barbuda"},
{ label: "Argentina", value: "Argentina"},
{ label: "Armenia", value: "Armenia"},
{ label: "Aruba", value: "Aruba"},
{ label: "Australia", value: "Australia"},
{ label: "Austria", value: "Austria"},
{ label: "Azerbaijan", value: "Azerbaijan"},
{ label: "Bahrain", value: "Bahrain"},
{ label: "Bangladesh", value: "Bangladesh"},
{ label: "Barbados", value: "Barbados"},
{ label: "Belarus", value: "Belarus"},
{ label: "Belgium", value: "Belgium"},
{ label: "Belize", value: "Belize"},
{ label: "Benin", value: "Benin"},
{ label: "Bermuda", value: "Bermuda"},
{ label: "Bhutan", value: "Bhutan"},
{ label: "Bolivia", value: "Bolivia"},
{ label: "Bosnia And Herzegovina", value: "Bosnia And Herzegovina"},
{ label: "Botswana", value: "Botswana"},
{ label: "Brazil", value: "Brazil"},
{ label: "British Indian Ocean Territory", value: "British Indian Ocean Territory"},
{ label: "British Virgin Islands", value: "British Virgin Islands"},
{ label: "Brunei", value: "Brunei"},
{ label: "Bulgaria", value: "Bulgaria"},
{ label: "Burkina Faso", value: "Burkina Faso"},
{ label: "Burundi", value: "Burundi"},
{ label: "Cabo Verde", value: "Cabo Verde"},
{ label: "Cambodia", value: "Cambodia"},
{ label: "Cameroon", value: "Cameroon"},
{ label: "Canada", value: "Canada"},
{ label: "Cayman Islands", value: "Cayman Islands"},
{ label: "Central African Republic", value: "Central African Republic"},
{ label: "Chad", value: "Chad"},
{ label: "Chile", value: "Chile"},
{ label: "China", value: "China"},
{ label: "Christmas Island", value: "Christmas Island"},
{ label: "Cocos (Keeling) Islands", value: "Cocos (Keeling) Islands"},
{ label: "Colombia", value: "Colombia"},
{ label: "Comoros", value: "Comoros"},
{ label: "Congo (Brazzaville)", value: "Congo (Brazzaville)"},
{ label: "Congo (Kinshasa)", value: "Congo (Kinshasa)"},
{ label: "Cook Islands", value: "Cook Islands"},
{ label: "Costa Rica", value: "Costa Rica"},
{ label: "Côte d'Ivoire", value: "Côte d'Ivoire"},
{ label: "Croatia", value: "Croatia"},
{ label: "Cuba", value: "Cuba"},
{ label: "Curaçao ", value: "Curaçao "},
{ label: "Cyprus", value: "Cyprus"},
{ label: "Czechia", value: "Czechia"},
{ label: "Denmark", value: "Denmark"},
{ label: "Dhekelia", value: "Dhekelia"},
{ label: "Djibouti", value: "Djibouti"},
{ label: "Dominica", value: "Dominica"},
{ label: "Dominican Republic", value: "Dominican Republic"},
{ label: "Ecuador", value: "Ecuador"},
{ label: "Egypt", value: "Egypt"},
{ label: "El Salvador", value: "El Salvador"},
{ label: "Equatorial Guinea", value: "Equatorial Guinea"},
{ label: "Eritrea", value: "Eritrea"},
{ label: "Estonia", value: "Estonia"},
{ label: "Ethiopia", value: "Ethiopia"},
{ label: "Falkland Islands (Islas Malvinas)", value: "Falkland Islands (Islas Malvinas)"},
{ label: "Faroe Islands", value: "Faroe Islands"},
{ label: "Federated States of Micronesia", value: "Federated States of Micronesia"},
{ label: "Fiji", value: "Fiji"},
{ label: "Finland", value: "Finland"},
{ label: "France", value: "France"},
{ label: "French Guiana", value: "French Guiana"},
{ label: "French Polynesia", value: "French Polynesia"},
{ label: "French Southern And Antarctic Lands", value: "French Southern And Antarctic Lands"},
{ label: "Gabon", value: "Gabon"},
{ label: "Gaza Strip", value: "Gaza Strip"},
{ label: "Georgia", value: "Georgia"},
{ label: "Germany", value: "Germany"},
{ label: "Ghana", value: "Ghana"},
{ label: "Gibraltar", value: "Gibraltar"},
{ label: "Greece", value: "Greece"},
{ label: "Greenland", value: "Greenland"},
{ label: "Grenada", value: "Grenada"},
{ label: "Guadeloupe", value: "Guadeloupe"},
{ label: "Guam", value: "Guam"},
{ label: "Guatemala", value: "Guatemala"},
{ label: "Guernsey", value: "Guernsey"},
{ label: "Guinea", value: "Guinea"},
{ label: "Guinea-Bissau", value: "Guinea-Bissau"},
{ label: "Guyana", value: "Guyana"},
{ label: "Haiti", value: "Haiti"},
{ label: "Honduras", value: "Honduras"},
{ label: "Hong Kong", value: "Hong Kong"},
{ label: "Hungary", value: "Hungary"},
{ label: "Iceland", value: "Iceland"},
{ label: "India", value: "India"},
{ label: "Indonesia", value: "Indonesia"},
{ label: "Iran", value: "Iran"},
{ label: "Iraq", value: "Iraq"},
{ label: "Ireland", value: "Ireland"},
{ label: "Isle Of Man", value: "Isle Of Man"},
{ label: "Israel", value: "Israel"},
{ label: "Italy", value: "Italy"},
{ label: "Jamaica", value: "Jamaica"},
{ label: "Japan", value: "Japan"},
{ label: "Jersey", value: "Jersey"},
{ label: "Jordan", value: "Jordan"},
{ label: "Kazakhstan", value: "Kazakhstan"},
{ label: "Kenya", value: "Kenya"},
{ label: "Kiribati", value: "Kiribati"},
{ label: "Kosovo", value: "Kosovo"},
{ label: "Kuwait", value: "Kuwait"},
{ label: "Kyrgyzstan", value: "Kyrgyzstan"},
{ label: "Laos", value: "Laos"},
{ label: "Latvia", value: "Latvia"},
{ label: "Lebanon", value: "Lebanon"},
{ label: "Lesotho", value: "Lesotho"},
{ label: "Liberia", value: "Liberia"},
{ label: "Libya", value: "Libya"},
{ label: "Liechtenstein", value: "Liechtenstein"},
{ label: "Lithuania", value: "Lithuania"},
{ label: "Luxembourg", value: "Luxembourg"},
{ label: "Macau", value: "Macau"},
{ label: "Macedonia", value: "Macedonia"},
{ label: "Madagascar", value: "Madagascar"},
{ label: "Malawi", value: "Malawi"},
{ label: "Malaysia", value: "Malaysia"},
{ label: "Maldives", value: "Maldives"},
{ label: "Mali", value: "Mali"},
{ label: "Malta", value: "Malta"},
{ label: "Marshall Islands", value: "Marshall Islands"},
{ label: "Martinique", value: "Martinique"},
{ label: "Mauritania", value: "Mauritania"},
{ label: "Mauritius", value: "Mauritius"},
{ label: "Mayotte", value: "Mayotte"},
{ label: "Mexico", value: "Mexico"},
{ label: "Moldova", value: "Moldova"},
{ label: "Monaco", value: "Monaco"},
{ label: "Mongolia", value: "Mongolia"},
{ label: "Montenegro", value: "Montenegro"},
{ label: "Montserrat", value: "Montserrat"},
{ label: "Morocco", value: "Morocco"},
{ label: "Mozambique", value: "Mozambique"},
{ label: "Myanmar", value: "Myanmar"},
{ label: "Namibia", value: "Namibia"},
{ label: "Nauru", value: "Nauru"},
{ label: "Nepal", value: "Nepal"},
{ label: "Netherlands", value: "Netherlands"},
{ label: "New Caledonia", value: "New Caledonia"},
{ label: "New Zealand", value: "New Zealand"},
{ label: "Nicaragua", value: "Nicaragua"},
{ label: "Niger", value: "Niger"},
{ label: "Nigeria", value: "Nigeria"},
{ label: "Niue", value: "Niue"},
{ label: "Norfolk Island", value: "Norfolk Island"},
{ label: "North Korea", value: "North Korea"},
{ label: "Northern Mariana Islands", value: "Northern Mariana Islands"},
{ label: "Norway", value: "Norway"},
{ label: "Oman", value: "Oman"},
{ label: "Pakistan", value: "Pakistan"},
{ label: "Palau", value: "Palau"},
{ label: "Panama", value: "Panama"},
{ label: "Papua New Guinea", value: "Papua New Guinea"},
{ label: "Paracel Islands", value: "Paracel Islands"},
{ label: "Paraguay", value: "Paraguay"},
{ label: "Peru", value: "Peru"},
{ label: "Philippines", value: "Philippines"},
{ label: "Pitcairn Islands", value: "Pitcairn Islands"},
{ label: "Poland", value: "Poland"},
{ label: "Portugal", value: "Portugal"},
{ label: "Puerto Rico", value: "Puerto Rico"},
{ label: "Qatar", value: "Qatar"},
{ label: "Reunion", value: "Reunion"},
{ label: "Romania", value: "Romania"},
{ label: "Russia", value: "Russia"},
{ label: "Rwanda", value: "Rwanda"},
{ label: "Saint Barthelemy", value: "Saint Barthelemy"},
{ label: "Saint Helena, Ascension, And Tristan Da Cunha", value: "Saint Helena, Ascension, And Tristan Da Cunha"},
{ label: "Saint Kitts And Nevis", value: "Saint Kitts And Nevis"},
{ label: "Saint Lucia", value: "Saint Lucia"},
{ label: "Saint Martin", value: "Saint Martin"},
{ label: "Saint Pierre And Miquelon", value: "Saint Pierre And Miquelon"},
{ label: "Saint Vincent And The Grenadines", value: "Saint Vincent And The Grenadines"},
{ label: "Samoa", value: "Samoa"},
{ label: "San Marino", value: "San Marino"},
{ label: "Sao Tome And Principe", value: "Sao Tome And Principe"},
{ label: "Saudi Arabia", value: "Saudi Arabia"},
{ label: "Senegal", value: "Senegal"},
{ label: "Serbia", value: "Serbia"},
{ label: "Seychelles", value: "Seychelles"},
{ label: "Sierra Leone", value: "Sierra Leone"},
{ label: "Singapore", value: "Singapore"},
{ label: "Sint Maarten", value: "Sint Maarten"},
{ label: "Slovakia", value: "Slovakia"},
{ label: "Slovenia", value: "Slovenia"},
{ label: "Solomon Islands", value: "Solomon Islands"},
{ label: "Somalia", value: "Somalia"},
{ label: "South Africa", value: "South Africa"},
{ label: "South Georgia And South Sandwich Islands", value: "South Georgia And South Sandwich Islands"},
{ label: "South Korea", value: "South Korea"},
{ label: "South Sudan", value: "South Sudan"},
{ label: "Spain", value: "Spain"},
{ label: "Spratly Islands", value: "Spratly Islands"},
{ label: "Sri Lanka", value: "Sri Lanka"},
{ label: "Sudan", value: "Sudan"},
{ label: "Suriname", value: "Suriname"},
{ label: "Svalbard", value: "Svalbard"},
{ label: "Swaziland", value: "Swaziland"},
{ label: "Sweden", value: "Sweden"},
{ label: "Switzerland", value: "Switzerland"},
{ label: "Syria", value: "Syria"},
{ label: "Taiwan", value: "Taiwan"},
{ label: "Tajikistan", value: "Tajikistan"},
{ label: "Tanzania", value: "Tanzania"},
{ label: "Thailand", value: "Thailand"},
{ label: "The Bahamas", value: "The Bahamas"},
{ label: "The Gambia", value: "The Gambia"},
{ label: "Timor-Leste", value: "Timor-Leste"},
{ label: "Togo", value: "Togo"},
{ label: "Tokelau", value: "Tokelau"},
{ label: "Tonga", value: "Tonga"},
{ label: "Trinidad And Tobago", value: "Trinidad And Tobago"},
{ label: "Tunisia", value: "Tunisia"},
{ label: "Turkey", value: "Turkey"},
{ label: "Turkmenistan", value: "Turkmenistan"},
{ label: "Turks And Caicos Islands", value: "Turks And Caicos Islands"},
{ label: "Tuvalu", value: "Tuvalu"},
{ label: "U.S. Virgin Islands", value: "U.S. Virgin Islands"},
{ label: "Uganda", value: "Uganda"},
{ label: "Ukraine", value: "Ukraine"},
{ label: "United Arab Emirates", value: "United Arab Emirates"},
{ label: "United Kingdom", value: "United Kingdom"},
{ label: "United States", value: "United States"},
{ label: "Uruguay", value: "Uruguay"},
{ label: "Uzbekistan", value: "Uzbekistan"},
{ label: "Vanuatu", value: "Vanuatu"},
{ label: "Vatican City", value: "Vatican City"},
{ label: "Venezuela", value: "Venezuela"},
{ label: "Vietnam", value: "Vietnam"},
{ label: "Wallis And Futuna", value: "Wallis And Futuna"},
{ label: "West Bank", value: "West Bank"},
{ label: "Yemen", value: "Yemen"},
{ label: "Zambia", value: "Zambia"},
{ label: "Zimbabwe", value: "Zimbabwe"},
]

const [ password, setPassword ] = useState("")
const [ confpassword, setConfpassword ] = useState("")
const [ email, setEmail ] = useState("")
const [ gender, setGender ] = useState("")
const [ dob, setDob ] = useState(new Date())
const hlist = []
const [ hobbies, setHobbies ] = useState(hlist)
const [ orgin, setOrgin ] = useState("") 
const [ lives, setLives ] = useState("")
const [ bio, setBio ] = useState("")
const [ first, setFirst ] = useState("")
const [ last, setLast ] = useState("")
const [ profileImage, setProfileImage ] = useState(null)
const [ val, setVal] = useState(null)
const [ op, setOp ] = useState(false)
const usern = props.navigation.getParam("user", null)
const [ sentI, setSentI ] = useState(null)
const [ open, setOpen ] = useState(false)
const [ vaidd, setValidd] = useState(true)
const [ city, setCity ] = useState("")
const sendI = async (image) => {

const formData = new FormData()
let image_data = {
uri : image.uri,
name : 'name',
type : 'image/jpg'
}
if (image != null){

await formData.append( 'image', image_data)
await formData.append('name', usern)
//await formData.append('name', 'a' )
setSentI(formData)
console.log('recieved')
}
console.log(formData)
}

const showImagePicker = async () => {

// Ask the user for the permission to access the media library 
const permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();
if (permissionResult.granted === false) {
alert("You've refused to allow this appp to access your photos!");
return;
}

let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
});
// Explore the result
console.log(result);
if (!result.cancelled) {
await setProfileImage(result);
console.log(result.uri);
sendI(result);

}
}
const openCamera = async () => {
// Ask the user for the permission to access the camera
const permissionResult = await ImagePicker.requestCameraPermissionsAsync();
if (permissionResult.granted === false) {
alert("You've refused to allow this appp to access your camera!");
return;
}
const result = await ImagePicker.launchCameraAsync();
// Explore the result
console.log(result);
if (!result.cancelled) {
setProfileImage(result);
console.log(result);
}
}

const image = () => {

console.log(sentI)
fetch(`http://192.168.5.172:8000/home/imagetest/`, {
method: 'POST',
headers: {
'Content-Type': 'multipart/form-data',
},
body: sentI, 
})
.then( res => res.json())
.then( res => {
console.log(res)
})
.catch( error => console.log(error))
}


const profile = () => {

let stringData = JSON.stringify({'user': usern, 'bio': bio, 'orgin': orgin, 'lives': lives, 'first': first, 'last': last , 'dob': dob.toISOString().split('T')[0], "hobbies": hobbies, "city": city,})
console.log(formData)
fetch(`http://192.168.5.172:8000/home/profile/`, {
method: 'POST',
headers: {
"Content-Type": 'application/json',
},
body: {
stringData,
formData
}, 
})
.then( res => res.json())
.then( res => {
console.log(res)
if (res == "Cityv"){
props.navigation.navigate("Home", {"user": usern})
} else if(res == "Cityx") {
props.navigation.navigate("Profile", {"message": "no such city in selected country"})
}
})
.catch( error => console.log(error))
}
const dateselect = (date) => { 
setDob(date)
setOpen(false)
}
const ssports = () => {
if (sports) {
setSports(false)
const name = "Sports"
setHobbies(current => current.filter(element => { return element !== 'Sports'}))
} else {
setSports(true)
setHobbies([...hobbies, "Sports"])
}
}
const svideo = () => {
if (video) {
setVideo(false)
const name = "Video Games"
setHobbies(current => current.filter(element => { return element !== 'Video Games'}))
} else {
setVideo(true)
setHobbies([...hobbies, "Video Games"])
}
}
const sread = () => {
if (read) {
setRead(false)
const name = "Reading"
setHobbies(current => current.filter(element => { return element !== 'Reading'}))
} else {
setRead(true)
setHobbies([...hobbies, "Reading"])
}
}
const stravel = () => {
if (travel) {
setTravel(false)
const name = "Travel"
setHobbies(current => current.filter(element => { return element !== 'Travel'}))
} else {
setTravel(true)
setHobbies([...hobbies, "Travel"])
}
}
const stv = () => {
if (tv) {
setTv(false)
const name = "Television"
setHobbies(current => current.filter(element => { return element !== 'Television'}))
} else {
setTv(true)
setHobbies([...hobbies, "Television"])
}
}
const sfish = () => {
if (fish) {
setFish(false)
const name = "Fishing"
setHobbies(current => current.filter(element => { return element !== 'Fishing'}))
} else {
setFish(true)
setHobbies([...hobbies, "Fishing"])
}
}
const scraft = () => {
if (craft) {
setCraft(false)
const name = "Crafting"
setHobbies(current => current.filter(element => { return element !== 'Crafting'}))
} else {
setCraft(true)
setHobbies([...hobbies, "Crafting"])
}
}
const scollect = () => {
if (collect) {
setCollect(false)
const name = "Collecting"
setHobbies(current => current.filter(element => { return element !== 'Collecting'}))
} else {
setCollect(true)
setHobbies([...hobbies, "Collecting"])
}
}
const smusic = () => {
if (music) {
setMusic(false)
const name = "Music"
setHobbies(current => current.filter(element => { return element !== 'Music'}))
} else {
setMusic(true)
setHobbies([...hobbies, "Music"])
}
}
const shike = () => {
if (hike) {
setHike(false)
const name = "Hiking"
setHobbies(current => current.filter(element => { return element !== 'Hiking'}))
} else {
setHike(true)
setHobbies([...hobbies, "Hiking"])
}
}
const sart = () => {
if (art) {
setArt(false)
const name = "Art"
setHobbies(current => current.filter(element => { return element !== 'Art'}))
} else {
setArt(true)
setHobbies([...hobbies, "Art"])
}
}
const scook = () => {
if (cook) {
setCook(false)
const name = "Cooking"
setHobbies(current => current.filter(element => { return element !== 'Cooking'}))
} else {
setCook(true)
setHobbies([...hobbies, "Cooking"])
}
}

return (
<View style={styles.scroll}>
<ScrollView style={styles.scroll}>
<Button onPress={showImagePicker} title="Select an image" />
<View style={styles.imageContainer}>
{
profileImage !== null ? <Image
source={{ uri: profileImage.uri }}
style={styles.image}   
/>  
:
<Image style={styles.image}
source={require('../assets/emptyProfile.png')}
/>
}

</View>

<Text style={styles.label}>User:</Text>
<TextInput style={styles.input}
editable={false}
defaultValue={usern}

/>
<Text style={styles.label}>Bio:</Text>
<TextInput style={styles.input} placeholder="Bio" onChangeText={ text => setBio(text)}
value={bio}
/>
<Text style={styles.label}>First:</Text> 
<TextInput style={styles.input} placeholder="First" onChangeText={ text => setFirst(text)}
value={first}
/>
<Text style={styles.label}>Last:</Text>
<TextInput style={styles.input} placeholder="Last" onChangeText={ text => setLast(text)}
value={last}
/>
<Text style={styles.label}></Text>
<RNPickerSelect 
onValueChange={(value) => setOrgin(value)}
value={orgin}
useNativeAndroidPickerStyle={false}
items={countries} placeholder={{label: "Country of Orgin", value: null}} style={pickerSelectStyles}
/>
<Text style={styles.label}></Text>
<RNPickerSelect 
onValueChange={(value) => setLives(value)}
value={lives}
useNativeAndroidPickerStyle={false}
items={countries} placeholder={{label: "Currently living...", value: null}} style={pickerSelectStyles}
/>
<Text style={styles.label}>City:</Text>
<TextInput style={styles.input} placeholder="City" onChangeText={ text => setCity(text)}
value={city} 
/>
<Text style={styles.error}>{ cityMessage ? cityMessage : ""}</Text>

<Text style={styles.label}>DOB:</Text>
<Pressable onPress={() => setOpen(true)} title="date">
<Text style={styles.input}>{ dob.toLocaleDateString() }</Text>
</Pressable>
<DateTimePickerModal
isVisible={open}
mode="date"
onConfirm={dateselect}
onCancel={() => setOpen(false)}
/>
<Text style={styles.label}>Hobbies:</Text>
<View>
<View style={styles.check}>
<Pressable onPress={() => ssports()}>
<FontAwesomeIcon style={sports == false ? styles.not : styles.is} icon={faSquare}/>
</Pressable>
<Text style={styles.not}>Sports</Text>
<Pressable onPress={() => svideo()}>
<FontAwesomeIcon style={video == false ? styles.not : styles.is} icon={faSquare}/>
</Pressable>
<Text style={styles.not}>Video Games</Text>
<Pressable onPress={() => sread()}>
<FontAwesomeIcon style={read == false ? styles.not : styles.is} icon={faSquare}/>
</Pressable>
<Text style={styles.not}>Reading</Text>
<Pressable onPress={() => stravel()}>
<FontAwesomeIcon style={travel == false ? styles.not : styles.is} icon={faSquare}/>
</Pressable>
<Text style={styles.not}>Travel</Text>
<Pressable onPress={() => stv()}>
<FontAwesomeIcon style={tv == false ? styles.not : styles.is} icon={faSquare}/>
</Pressable>
<Text style={styles.not}>TV</Text>
<Pressable onPress={() => sfish()}>
<FontAwesomeIcon style={fish == false ? styles.not : styles.is} icon={faSquare}/>
</Pressable>
<Text style={styles.not}>Fishing</Text>
</View>
<View style={styles.check}>
<Pressable onPress={() => scraft()}>
<FontAwesomeIcon style={craft == false ? styles.not : styles.is} icon={faSquare}/>
</Pressable>
<Text style={styles.not}>Crafting</Text>
<Pressable onPress={() => scollect()}>
<FontAwesomeIcon style={collect == false ? styles.not : styles.is} icon={faSquare}/>
</Pressable>
<Text style={styles.not}>Collecting</Text>
<Pressable onPress={() => smusic()}>
<FontAwesomeIcon style={music == false ? styles.not : styles.is} icon={faSquare}/>
</Pressable>
<Text style={styles.not}>Music</Text>
<Pressable onPress={() => shike()}>
<FontAwesomeIcon style={hike == false ? styles.not : styles.is} icon={faSquare}/>
</Pressable>
<Text style={styles.not}>Hiking</Text>
<Pressable onPress={() => sart()}>
<FontAwesomeIcon style={art == false ? styles.not : styles.is} icon={faSquare}/>
</Pressable>
<Text style={styles.not}>Art</Text>
<Pressable onPress={() => scook()}>
<FontAwesomeIcon style={cook == false ? styles.not : styles.is} icon={faSquare}/>
</Pressable>
<Text style={styles.not}>Cooking</Text>
</View>
</View>

<Button  onPress={ () => image()} title="SetUp Profile"></Button>
<View style={styles.footer}>
</View>

</ScrollView>
<StatusBar style="auto"/>
</View>

)

}
Profile.navigationOptions = screenProps => ({
headerLeft: () => null,
gestureEnabled: false,
headerStyle: {
backgroundColor: 'black'
},
headerTintColor: 'white',

})
const styles = StyleSheet.create({
container: {
flex: 1, 
backgroundColor: '#999',

},

scroll: {
backgroundColor:'black'
},

footer: {
backgroundColor: 'black',
padding:35,
},

label: {
fontSize: 24,
color: "white",
padding: 10,

},

input: {
fontSize: 24,
backgroundColor: "white",
padding: 10,
margin: 10,
borderRadius: 5,
borderColor: "white",
borderWidth: 1,
},
buttonContainer: {
width: 400,
flexDirection: 'row',
justifyContent: 'space-around'
},
imageContainer: {
justifyContent: "center",
alignItems: "center",
alignContent: 'center',


},
image: {

width: 160,
height: 160,
resizeMode: 'cover',
borderRadius: 300,
},
not: {
color: 'white',

},
is: {
backgroundColor: 'white'
},
check: {
flexDirection: "row",
padding: 10,
},
error: {
textAlign: 'center',
color: 'red',
},
inputIOS: {
fontSize: 16,
paddingVertical: 12,
paddingHorizontal: 10,
borderWidth: 1,
borderColor: 'gray',
borderRadius: 4,
color: 'white',
paddingRight: 30 // to ensure the text is never behind the icon
},
inputAndroid: {
fontSize: 16,
paddingHorizontal: 10,
paddingVertical: 8,
borderWidth: 0.5,
borderColor: 'gray',
borderRadius: 8,
color: 'white',
paddingRight: 30 // to ensure the text is never behind the icon
}





});



const pickerSelectStyles = StyleSheet.create({
inputIOS: {
fontSize: 16,
paddingVertical: 12,
paddingHorizontal: 10,
borderWidth: 1,
borderColor: 'gray',
borderRadius: 4,
color: 'white',
paddingRight: 30 // to ensure the text is never behind the icon
},
inputAndroid: {
fontSize: 16,
paddingHorizontal: 10,
paddingVertical: 8,
borderWidth: 0.5,
borderColor: 'gray',
borderRadius: 8,
color: 'white',
paddingRight: 30 // to ensure the text is never behind the icon
}
});

我该如何解决这个问题？

Answer 1

如果您使用的是npmnpm i react-native-picker-select --legacy-peer-deps，则可能存在依赖关系问题。请尝试重新安装程序包。