Buscar

comando Picker fazendo lista em um unico campo para escolha do usuario

Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original

import React, { Component } from 'react';
import { View,
Text, 
StyleSheet,
Picker
} from 'react-native';
class App extends Component{
 constructor(props){
 super(props);
 this.state={
 pizza:0,
 pizzas:[
 {key:1,nome:'carne moida',valor:35.99},
 {key:2,nome:'frango',valor:45.99},
 {key:3,nome:'bife',valor:55.99},
 ]
 };
 }
 
 render(){
 let pizzasItem = this.state.pizzas.map((v,k)=>{
 return <Picker.Item key={k} value={k} label={v.nome}/>
 })
 return(
 <View style={styles.container}>
 <Text style={styles.logo}>Menu Pizzas </Text>
 <Picker
 selectedValue={this.state.pizza}
 onValueChange={(itemValue,itemIndex)=>this.setState({pizza:itemValue})}
 >
 {pizzasItem}
 </Picker>
 <Text style={styles.pizzas}>
 {this.state.pizzas[this.state.pizza].nome}
 </Text>
 <Text style={styles.pizzas}>
 R$: {this.state.pizzas[this.state.pizza].valor}
 </Text>
 </View>
 );
 }
}
const styles=StyleSheet.create({
 container:{
 flex:1,
 marginTop:15,
 },
 logo:{
 textAlign:"center",
 fontSize:25,
 },
 pizzas:{
 marginTop:15,
 backgroundColor:'#ddd',
 fontSize:25,
 textAlign:'center'
 }
});
export default App;

Teste o Premium para desbloquear

Aproveite todos os benefícios por 3 dias sem pagar! 😉
Já tem cadastro?

Continue navegando