React native 反应：安排元素

我正在构建一个非常简单的应用程序，带有一个选择器和两个输入/标签

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


  },
});

从“React”导入React；
从“react native”导入{样式表、文本、视图、按钮、模式、文本输入、选择器}；
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
}
状态={
b1文本：“Kg”，
b2text:'Cm'，
重量：''，
高度：''，
标准：“公制”
}
render（）{
返回(
{
this.setState（{standard:itemValue}）；
如果（itemValue==“度量”）{
this.setState（{b1text:“Kg”}）；
this.setState（{b2text:“Cm”}）；
}
如果（itemValue==“英制”）{
this.setState（{b1text:“Lbs”}）；
this.setState（{b2text:“Inches”}）；
}
} }
样式={{高度：100，宽度：100}
>
this.setState（{text:weight}）}
值={this.state.weight}
/>
{this.state.b1text}
this.setState（{text:height}）}
值={this.state.height}
/>
{this.state.b2text}
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”，
flexDirection:'行'，
},
});

但我希望它看起来像这样，如下所示

我试过边距、填充等，但仍然没有成功

---

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

我已经创建了一个Expo零食，其中有一个更接近您想要实现的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”导入React；
从“react native”导入{样式表、文本、视图、文本输入、选择器}；
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
}
状态={
b1文本：“Kg”，
b2text:'Cm'，
重量：''，
高度：''，
标准：“公制”，
};
render（）{
返回(
{
this.setState（{standard:itemValue}）；
如果（itemValue==‘Metric’）{
this.setState（{b1text:'Kg'}）；
this.setState（{b2text:'Cm'}）；
}
如果（itemValue==='Imperial'）{
this.setState（{b1text:'Lbs'}）；
this.setState（{b2text:'Inches}）；
}
}}>
this.setState（{text:weight}）}
值={this.state.weight}
/>
{this.state.b1text}
this.setState（{text:height}）}
值={this.state.height}
/>
{this.state.b2text}
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
},
顶部：{
宽度：“100%”，
弹性：1，
},
底部：{
弹性：1，
对齐项目：“居中”，
},
});

您需要学习如何使用

react native

编写样式，这是一件至关重要的事情。这是一个资源，它提供了所有样式属性的指南，您可以从“react native”使用

const{StyleSheet}。

---

祝你好运：）

你需要在这里发布你的代码，而不是任何第三方网站，它们可能会在明天更改或消失，使你的答案毫无用处。感谢您提供这些指导原则，我已经做了必要的调整来提供这里的代码。我很抱歉，因为当我们提供支持时，我们通常会在需要提供代码解决方案时链接snack.expo.io。