Блог

 import React,{ useState} from 'react';
import { StyleSheet, Text, TextInput, View } from 'react-native';
import { Picker } from '@react-native-picker/picker'

const App=()=> {
  const [Region, setRegion] = useState("-");
  const [City, setCity] = useState("-");
  const CitySelector=()=>{
    if(Region==='punjab'){
      <Picker
          mode='dropdown'
          selectedValue={City}
          style={{ height:20,width: 150 }}
          onValueChange={(itemValue, itemIndex) => setCity(itemValue)}>
            <Picker.Item label="Lahore" value="lahore" />
            <Picker.Item label="Islamabad" value="islamabad" />
          </Picker>
    }
    else if(Region==='sindh'){
      <Picker
          mode='dropdown'
          selectedValue={City}
          style={{ height:20,width: 150 }}
          onValueChange={(itemValue, itemIndex) => setCity(itemValue)}>
            <Picker.Item label="Karachi" value="karachi" />
            <Picker.Item label="Hyderabad" value="hyderabad" />
          </Picker>
    }
  }
    return (
      <View style={styles.container}>
        <View style={styles.line}>
          <Text style={styles.text}>Enter name:</Text>
          <TextInput
            style={styles.input}
            placeholder='e.g. John Doe'
          />
        </View>
        <View style={styles.line}>
          <Text style={styles.text}>Enter Age:</Text>
          <TextInput
            keyboardType='numeric'
            style={styles.input}
            placeholder='2'
          />
        </View>
        <View style={styles.line}>
          <Text style={styles.text}>Enter Region:</Text>
          <Picker
          mode='dropdown'
          selectedValue={Region}
          style={{ height: 20, width: 150 }}
          onValueChange={(itemValue, itemIndex) => setRegion(itemValue)}>
            <Picker.Item label="Punjab" value="punjab" />
            <Picker.Item label="Sindh" value="sindh" />
          </Picker>
        </View>
        <View style={styles.line}>
          <Text style={styles.text}>Enter City:</Text>
          <CitySelector/>
        </View>

      </View>
    );
};

const styles = StyleSheet.create({
  container: {
    flex:1,
    backgroundColor: '#fff',
    alignItems:'center',
    justifyContent:'center',
  },
  line:{
    flexDirection:'row',
    flex:0,
    marginBottom:10,
  },
  text:{
    flex:1,
  },
  input:{
    flex:1,
    width:70,
    height:20,
    borderBottomWidth:1,
    borderBottomColor:'#777',
  },
}
)
export default App;
 

Это мой код, я хотел бы получить помощь в этом, я не знаю, почему возникает ошибка. Я обратился к документации react native для получения некоторой помощи в коде.

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

попробуйте

 const CitySelector = () => {
   if (Region === 'punjab') {
       return <Picker
        mode='dropdown'
        selectedValue={City}
        style={{ height:20,width: 150 }}
        onValueChange={(itemValue, itemIndex) => setCity(itemValue)}>
          <Picker.Item label="Lahore" value="lahore" />
          <Picker.Item label="Islamabad" value="islamabad" />
        </Picker>
   }
   if (Region === 'sindh') {
       return <Picker
        mode='dropdown'
        selectedValue={City}
        style={{ height:20,width: 150 }}
        onValueChange={(itemValue, itemIndex) => setCity(itemValue)}>
          <Picker.Item label="Karachi" value="karachi" />
          <Picker.Item label="Hyderabad" value="hyderabad" />
        </Picker>
   }
}