Текст кнопки nativebase пропал, когда задано родительское выравнивание

У меня есть этот экран, использующий 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>

Это просто выглядит так

screen image

Я не понимаю, почему текст кнопки не отображается, когда стили flexDirection: "row", alignItems: "flex-end" установлены во втором представлении?

Вот такой же экран без alignItems

enter image description here

enter image description here

Является ли этот нижний розовый блок частью вашей кнопки ??, также не могли бы вы поделиться снимком экрана той же страницы, когда включена опция переключения и выделен вид формы, будет легче найти проблему.

warl0ck 11.04.2018 13:12

@ warl0ck, этот розовый блок и есть кнопка.

lcssanches 11.04.2018 17:41

Если вы сделаете вид формы для строки направления гибкости, все элементы формы будут пытаться располагаться в одной строке, и почему вы хотите, чтобы поля ввода были в одной строке? Если вы просто хотите, чтобы форма была выровнена по нижней части страницы, удалите направление гибкости и добавьте justifyContent как flex-end и просто добавьте paddingBottom из 2, возможно

warl0ck 11.04.2018 18:29

Работал как шарм. Сделайте ответ, чтобы я мог его принять. Спасибо за объяснение @ warl0ck. Не нужно добавлять paddingBottom

lcssanches 11.04.2018 18:54

рад, что смог помочь, я опубликовал это как ответ :)

warl0ck 12.04.2018 05:37
0
5
642
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если вы сделаете вид формы для flexDirection row, все элементы формы будут пытаться попасть в одну строку или строку, и почему вы хотите, чтобы поля ввода были в одной строке?

Если вы просто хотите, чтобы форма была выровнена в нижней части страницы, удалите flexDirection как строку, поскольку по умолчанию это flexDirection: 'column', что вам понадобится, и добавьте justifyContent в качестве гибкого конца и просто добавьте paddingBottom 1 или 2, возможно

итоговый стиль будет выглядеть так:

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

Другие вопросы по теме