リアクションネイティブ：アレンジする要素

Question

私は、ピッカーと2つの入力/ラベルを持つ非常に単純なアプリケーションを構築しています。

現在、私のiPhoneではこれは次のようです。

これは私のコード

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', 


    }, 
}); 

あるしかし、私は以下に示すように、それはこのようなものを見てみたいです。

私はマージン、パディングなどを試しましたが、まだ運がありません。

誰かが私が私が欲しいかのようなUIを変更するために使用することができますフレックス何CSS /プロパティを教えてもらえますか？

Answer 1

達成したいUIのより近い例を持つExpo Snackを作成しました。しかし、私はあなたに詳細を解決するためにそれを残します。あなたがする必要がある重要な事柄の

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', 
    }, 
}); 

一つはreact-nativeでのスタイルの書き方を学びます。ここでは、const {StyleSheet} from 'react-native'.

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

幸運:)