Question

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

<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并添加一个paddingBottom为1或2可能

所以你的最终风格将如下：

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

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

1 个答案: