Question

我正在尝试将React Native视图放置在屏幕底部：

  <TouchableHighlight onPress={() => this.logout()}>
    <View style={{ position: "absolute", bottom: 0 }}>
      <Text>{SignOut}</Text>
    </View>
  </TouchableHighlight>

还有父母：

  <Fragment>
    <View>
      <ProfileSettings profile={this.state.profile} />
      <MainSettings data={this.state} />

    </View>
    <LogoutSettings />
  </Fragment>

然后是布局：

  <Fragment>
    <StatusBar barStyle="dark-content" />
    <SafeAreaView>
      {/*<BackgroundProcess />*/}
      <Header />
      {this.props.children}
    </SafeAreaView>
  </Fragment>

据我所知，这应该让我一直走到最底层...

但是，我的视图正位于屏幕中间。

我在这里做错了什么？是否有更好的方法将视图放置在屏幕底部？很多教程都说使用绝对位置绝对值和下限0，但是在我的特定用例中似乎不起作用

Answer 1

您可以在没有绝对位置的情况下进行操作。在“ LogoutSettings”之前添加“ flex：1”以进行查看，这样它将具有完整的高度，并且“ LogoutSettings”将显示在底部

在父级中尝试

for

绝对删除位置

<Fragment>
    <View style={{flex:1}}>
      <ProfileSettings profile={this.state.profile} />
      <MainSettings data={this.state} />
    </View>
    <LogoutSettings />
  </Fragment>

Answer 2

我认为您想要TouchableHighlight上的样式，而不是View

  <TouchableHighlight onPress={() => this.logout()} style={{ position: "absolute", bottom: 0 }}>
    <View>
      <Text>{SignOut}</Text>
    </View>
  </TouchableHighlight>

您实际上根本不需要View

无法将React Native View定位在底部

2 个答案: