React-Native Flexbox 垂直对齐项目答案

【问题标题】：React-Native Flexbox align items verticalReact-Native Flexbox 垂直对齐项目
【发布时间】：2018-03-06 06:25:18
【问题描述】：

我是 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;

【问题讨论】：

标签： react-native flexbox

【解决方案1】：

已编辑：您使用的库看起来有问题，设置 flex: 0 并为 android 和 ios 添加了宽度修复，您可以在两个 apetizers 中查看演示

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

这里是demo

【讨论】：

哦，对不起，我没看到你在使用 wix/react-native-ui-lib
非常感谢您参与我的问题并提供解决方案。它有效！