React Native：排列元素

Question

我正在构建一个非常简单的应用程序，其中包含一个选择器和两个 inputs/labels。

目前在我的 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',


  },
});

但我希望它看起来像下面这样。

我试过 margin，padding 等等，还是不行。

有人能告诉我 css/flex 属性我可以用什么来改变 UI 吗？

Answer 1

我创建了一个 Expo Snack，它有一个更接近您想要实现的 UI 示例。但我会把它留给你来解决细节问题。

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

祝你好运:)

React Native：排列元素

React Native : Arranging elements

flexbox

react-native

react-native-flexbox

expo