设置父对齐时 NativeBase 按钮文本消失

Question

我有这个屏幕，使用 NativeBase。这只是一个登录屏幕。它分为两部分，第一部分是图像标志和注册按钮，第二部分是登录字段。

<Container>
  <Content contentContainerStyle={{ flex: 1 }}>
    <View
      style={{
        flex: 2,
        alignItems: "center",
        justifyContent: "center"
      }}
    >
      <Thumbnail
        large
        source={require("../../../images/logo-splash.png")}
        style={{
          alignSelf: "center",
          marginBottom: 50
        }}
      />
      <Button full transparent>
        <Text style={{ fontSize: 12 }}>Doesn't have an account? Sign Up</Text>
      </Button>
    </View>
    <View style={{ flex: 1, flexDirection: "row", alignItems: "flex-end" }}>
      <Form>
        <Item stackedLabel>
          <Label>Email</Label>
          <Input />
        </Item>
        <Item stackedLabel last>
          <Label>Password</Label>
          <Input secureTextEntry />
        </Item>
        <Button full>
          <Text>Sign In</Text>
        </Button>
      </Form>
    </View>
  </Content>
</Container>

就是这个样子

我不明白的是为什么在第二个视图上设置样式 flexDirection: "row", alignItems: "flex-end" 时按钮文本没有显示？

这是没有alignItems

的相同屏幕

Answer 1

如果您将表单视图设置为 flexDirection row，所有表单元素将尝试出现在同一行或同一行中，为什么您希望输入字段在同一行中？

如果您只是想让表单在页面底部对齐，请移除 flexDirection 以作为默认行，因为默认情况下它是 flexDirection: 'column'，这是您需要的，并添加 justifyContent 作为 flex-end 并且只是添加 1 或 2 的 paddingBottom 可能

因此您的最终样式将如下所示：

style={{ flex: 1, justifyContent: 'flex-end', paddingBottom: 2 }}

设置父对齐时 NativeBase 按钮文本消失

NativeBase button text gone when parent align is set

flexbox

react-native

native-base

设置父对齐时 NativeBase 按钮​​文本消失

NativeBase button text gone when parent align is set

flexbox

react-native

native-base

设置父对齐时 NativeBase 按钮文本消失