Ausrichten von Text und Auswahl in React Native

Question

Wie richten wir einen Text so aus, dass er neben einem Input in React Native ist? Im Bild unten befindet sich der Text oben links, aber der Picker scheint mit einem Padding oder Rand versehen zu sein. Ich habe versucht, andere Lösungen mit Flex, sondern auch ran into this problem

Answer 1

Dies funktioniert für mich -

<View style={styles.Container}> 
    <View style={{flexDirection: 'row', alignItems: 'center'}}> 
     <View style={{flex:.5}}> 
     <Text>Placeholder</Text> 
     </View> 
     <View style={{flex:.5}}> 
     <Picker> 
      <Picker.Item label="Java" value="java"/> 
      <Picker.Item label="JavaScript" value="js"/> 
     </Picker> 
     </View> 
    </View> 
    </View> 

Sie können die Flex-Werte ändern, um Ihre Bedürfnisse nach.

Answer 2

Ich habe ein ähnliches Problem mit dem Picker. Geben Sie gleiche Flex für Text und Auswahl (zB: Eltern haben flex: 1 und geben flex: 0,5 für Text und Picker). Es ist besser, dem Picker Höhe und Breite entsprechend Ihrer Bildschirmgröße zu geben. Ich glaube, du hast flexDirection (row) nicht die übergeordnete Ansicht geben. Und geben Sie auch Höhe und Breite für Gegenstände zum Pflücker.

Beispielcode für das Geben Stil Picker:

<Picker 
     style={styles.picker} 
     mode="dropdown" 
     itemStyle={styles.itemStyle}> 
      <Item label="1 Hr" value="1" /> 
      <Item label="4 Hrs" value="4" /> 
      <Item label="8 Hrs" value="8" /> 
      <Item label="16 Hrs" value="16" /> 
      <Item label="24 Hrs" value="24" /> 
    </Picker> 

Styles:

itemStyle: { 
    fontSize: 15, 
    height: 75, 
    color: 'black', 
    textAlign: 'center', 
    fontWeight: 'bold' 
    } 
picker: { 
    width: 100 
    }, 

Sein für mich arbeiten.

Danke.