问题定位元素到底部答案

【问题标题】：Problem positioning element to the bottom问题定位元素到底部
【发布时间】：2019-08-21 07:56:21
【问题描述】：

我使用原生基础作为我的应用程序模板，并且我一直在尝试仅使用 flex 将两个按钮元素放置在页脚上方。 Here is how the buttons are positioned currently.

我尝试做 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-native native-base

【解决方案1】：

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

您可以从原生基础访问内容的contentContainerStyle 属性，然后为其赋予 justifyConent 和 alignItens -> flex-end 的样式。

我希望它会起作用。

This will help you.

【讨论】：