代码之家 › 专栏 › 技术社区 › VPY

反应本机:排列元素

react-native-flexbox expo flexbox react-native

-1

VPY · 技术社区 · 7 年前

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

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


  },
});

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

我尝试了边距、填充等,但仍然没有成功。

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

1 回复 | 直到 7 年前

Jim 7 年前

我创建了一个世博会小吃,它有一个更接近您想要实现的用户界面的示例。但我会把细节留给你来解决。

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

祝你好运:)