Intento implementar un selector y hacerlo visible solo en un área determinada de una caja. Agregué un estilo con ancho y alto a mi selector y esperaba que el selector apareciera en este cuadro. El selector se vuelve completamente diferente. ¿Cómo puedo representar el selector dentro del cuadro que defino en mi atributo de estilo para el selector?

Aquí está mi implementación:

Importaciones

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

Función

 const LandingPage = () => { const [selectedValue, setSelectedValue] = useState("10 rounds"); return ( <View style={[styles.styleGeneral, {}]}> <View style={[styles.styleStandardOne]}>...Some view...</View> <View style={[styles.styleForPicker]}> <Text style={{ fontSize: 30 }}>Rounds</Text> <Picker selectedValue={selectedValue} style={{ height: 100, width: 100, backgroundColor: "blue" }} onValueChange={(itemValue, itemIndex) => setSelectedValue(itemValue)} > <Picker.Item label="red" value="0"></Picker.Item> <Picker.Item label="blue" value="1"></Picker.Item> </Picker> </View> <View style={[styles.styleStandardTwo]}>...Some view...</View> <View style={[styles.styleStandardTwo]}>...Some view...</View> <View style={[styles.styleStandardTwo]}>...Some view...</View> </View> ); };

Estilos

 const styles = StyleSheet.create({ styleGeneral: { flex: 1, padding: 20, flexDirection: "column", margin: 0, padding: 0, }, styleForPicker: { backgroundColor: "yellow", flex: 3, }, styleStandardOne: { backgroundColor: "red", flex: 1.5, justifyContent: "center", }, styleStandardTwo: { backgroundColor: "red", justifyContent: "center", alignItems: "center", flex: 3, }, });