React-Native Flexbox将项目垂直对齐

Posted 2021-04-21

我是React-Native的新手，想要在容器中垂直显示项目。但由于某些原因，我无法在android上看到TextInput。首先我没有在ios上看到它，但是通过将position: "absolute"添加到TextInput我能够在iOS上看到它，android仍然缺失。我不知道为什么。 （我正在使用wix / react-native-ui-lib）

import React from "react";
import { View, TextInput, Text, Button, Image } from "react-native-ui-lib";

class MainScreen extends React.Component {
  constructor() {
    super();
  }

  render() {
    return (
      <View useSafeArea={true} style={style.Main}>
        <View style={style.phoneBox}>
          <Image
            style={{ width: 30, height: 30 }}
            source={require("../../assets/icons/country_austria.png")}
          />
          <Text text50>+43</Text>
          <TextInput
            style={{ position: "absolute" }}
            text50
            placeholder="Handynummer eingeben"
            hideUnderline={true}
          />
        </View>
      </View>
    );
  }
}

const style = {
  Main: {
    flex: 1,
    flexDirection: "column"
  },
  phoneBox: {
    flex: 1,
    flexDirection: "row",
    alignItems: "stretch"
  }
};

export default MainScreen;

答案

编辑：看起来您正在使用的库设置flex：0并为两者添加宽度修复，Android和ios你可以在两个apetizers中检查演示的问题

<TextInput
   style={{width: 250, flex: 0}}
   text50
   placeholder="Handynummer eingeben"
   hideUnderline={true}
/>

这里有一个demo