React Native: Anordnen von Elementen

Question

Ich baue eine sehr einfache App mit einem Picker und zwei Eingängen/Labels.

Es sieht derzeit so aus in meinem iphone.

Dies ist mein Code

import React from 'react'; 
import { StyleSheet, Text, View, Button, Modal, TextInput, Picker } from 'react-native'; 

export default class App extends React.Component { 

constructor(props) { 
    super(props); 

} 



state = { 
    b1text: 'Kg', 
    b2text: 'Cm', 
    weight: '', 
    height: '', 
    standard: 'Metric' 
} 

render() { 
    return (

    <View style={styles.container}> 
    <Picker 
      selectedValue={this.state.standard} 
      onValueChange={(itemValue, itemIndex) => { 
                 this.setState({standard: itemValue}); 
                 if(itemValue === "Metric") { 
                 this.setState({b1text: "Kg"}); 
                 this.setState({b2text: "Cm"}); 
                 } 
                 if(itemValue === "Imperial") { 
                  this.setState({b1text: "Lbs"}); 
                  this.setState({b2text: "Inches"}); 
                 } 

                } } 
      style={{height: 100, width: 100 }} 

     > 
      <Picker.Item label="Metric" value="Metric" /> 
      <Picker.Item label="Imperial" value="Imperial" /> 
    </Picker> 

    <TextInput 
       style={{height: 40, width: 60, borderColor: 'gray', borderWidth: 1}} 
      onChangeText={(text) => this.setState({text: weight})} 
      value={this.state.weight} 
      /> 
    <Text>{this.state.b1text}</Text> 
    <TextInput 
       style={{height: 40, width: 60, borderColor: 'gray', borderWidth: 1}} 
      onChangeText={(text) => this.setState({text: height})} 
      value={this.state.height} 
      /> 

    <Text>{this.state.b2text}</Text> 


    </View> 

); 

} 

} 

const styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     backgroundColor: '#fff', 
     alignItems: 'center', 
     justifyContent: 'center', 
     flexDirection: 'row', 


    }, 
}); 

Aber ich will es so etwas wie dies aussehen wie unten dargestellt.

Ich habe Rand, Polsterung usw. versucht noch immer kein Glück.

Kann mir jemand sagen, was css/flex Eigenschaft ich die Benutzeroberfläche wie ändern kann, wie ich will?

Answer 1

Ich habe einen Expo Snack erstellt, der ein genaueres Beispiel für die Benutzeroberfläche zeigt, die Sie erreichen möchten. Aber ich überlasse es Ihnen, die Details auszuarbeiten.

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

export default class App extends React.Component { 
    constructor(props) { 
    super(props); 
    } 

    state = { 
    b1text: 'Kg', 
    b2text: 'Cm', 
    weight: '', 
    height: '', 
    standard: 'Metric', 
    }; 

    render() { 
    return (
     <View style={styles.container}> 
     <View style={styles.top}> 
      <Picker 
      selectedValue={this.state.standard} 
      onValueChange={itemValue => { 
       this.setState({ standard: itemValue }); 
       if (itemValue === 'Metric') { 
       this.setState({ b1text: 'Kg' }); 
       this.setState({ b2text: 'Cm' }); 
       } 
       if (itemValue === 'Imperial') { 
       this.setState({ b1text: 'Lbs' }); 
       this.setState({ b2text: 'Inches' }); 
       } 
      }}> 
      <Picker.Item label="Metric" value="Metric" /> 
      <Picker.Item label="Imperial" value="Imperial" /> 
      </Picker> 
     </View> 
     <View style={styles.bottom}> 
      <TextInput 
      style={{ 
       height: 40, 
       width: 60, 
       borderColor: 'gray', 
       borderWidth: 1, 
      }} 
      onChangeText={() => this.setState({ text: weight })} 
      value={this.state.weight} 
      /> 
      <Text>{this.state.b1text}</Text> 
      <TextInput 
      style={{ 
       height: 40, 
       width: 60, 
       borderColor: 'gray', 
       borderWidth: 1, 
      }} 
      onChangeText={() => this.setState({ text: height })} 
      value={this.state.height} 
      /> 
      <Text>{this.state.b2text}</Text> 
     </View> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    }, 
    top: { 
    width: '100%', 
    flex: 1, 
    }, 
    bottom: { 
    flex: 1, 
    alignItems: 'center', 
    }, 
}); 

Einer der entscheidenden Dinge, die Sie brauchen, ist zu lernen, wie man Stile mit react-native zu schreiben. Hier ist eine Ressource, die eine Führung von all den Stil Eigenschaften hat Sie mit const {StyleSheet} from 'react-native'.

https://github.com/vhpoet/react-native-styling-cheat-sheet

Viel Glück :)