时间戳

首页 > 解决方案 > 问题定位元素到底部

react-native - 问题定位元素到底部

问题描述

我使用本机基础作为我的应用程序模板，并且我一直在尝试仅使用 flex 将两个按钮元素放置在页脚上方。这是按钮当前的位置。

我尝试做 justifyContent: flex-end / space-between 但按钮仍然远离页脚。

 <Container>
        <Header>
          <MainHeader />
        </Header>
        <Content>
            <View style={{flex: 1, justifyContent: 'center'}} >
                <View style={{  borderBottomColor: 'black', borderBottomWidth: 1, height: 50 }}>
                    <View style={{ flexDirection: 'row' }}>
                        <View style={{ flex: 1, alignSelf: 'center' }}>
                            <Text>Name</Text>
                        </View>
                        <View style={{ flex: 1, alignSelf: 'center' }}>
                            <Text>Sales</Text>
                        </View> 
                        <View style={{ flex: 1, alignSelf: 'center' }}>
                            <Text>Commission</Text>
                        </View> 
                        <View style={{ flex: 1, alignSelf: 'center' }}>
                            <Text>Payout</Text>
                        </View> 
                        <View style={{ flex: 1, alignSelf: 'center' }}>
                            <Text>Profit</Text>
                        </View>
                    </View>
                </View>
                {this.renderRow()}
                <View style={{ flexDirection: 'column', justifyContent: 'space-between' }} >
                    <View style={{ flexDirection: 'row', alignSelf: 'stretch', height: 50, justifyContent: 'space-between' }} >
                        <View style={{flex:1, alignSelf: 'center'}}>
                            <Button onPress={() => this.share(this.state.response)} title="Share"></Button>
                        </View>
                        <View style={{flex:1, alignSelf: 'center'}}>
                            <Button onPress={() => this.share(this.state.response)} title="Share"></Button>
                        </View>
                    </View>
                </View>
            </View>
        </Content>
        <Footer>
          <MainFooter />
        </Footer>
      </Container>

我希望共享按钮位于页脚上方的页面底部。

标签： react-nativenative-base

解决方案

原因基本上是因为一切都在里面content，基本上是一个滚动视图。您不能将某些内容发送到滚动视图的末尾，因为它是父级。

您可以contentContainerStyle从原生基础访问内容的道具，然后将其样式设置为 justifyConent 和 alignItens -> flex-end。

我希望它会奏效。

这将对您有所帮助。

推荐阅读