Question

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

目前在我的iphone中看起来像这样。

这是我的代码

    const subscription = this.accountsObservable.subscribe(accounts => {
      this.accountsArray = accounts;
    });

    subscription.unsubscribe();

但我希望它看起来如下所示。

我尝试了保证金，填充等等。仍然没有运气。

有人可以告诉我我可以用什么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：排列元素

1 个答案: