86

假设这是布局：

<View style={styles.container}>
    <View style={styles.titleWrapper}>
        ...
        ...
    </View>
    <View style={styles.inputWrapper}>
        ...
        ...
    </View>

    <View style={styles.footer}>
        <TouchableOpacity>
            <View style={styles.nextBtn}>
                <Text style={styles.nextBtnText}>Next</Text>
            </View>
        </TouchableOpacity>
    </View>
</View>

我想使带有页脚样式的视图位于屏幕底部。我尝试将alignSelf属性赋予页脚，但不是将其定位在底部，而是将其定位在屏幕的右侧。如何使页脚项目坚持到底？谢谢你。

4

13 回答 13

76

我会使用以下方法：

<View style={styles.container}>

    <View style={styles.contentContainer}> {/* <- Add this */}

        <View style={styles.titleWrapper}>
            ...
        </View>
        <View style={styles.inputWrapper}>
            ...
        </View>

    </View>

    <View style={styles.footer}>
        ...
    </View>
</View>

var styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    titleWrapper: {

    },
    inputWrapper: {

    },
    contentContainer: {
        flex: 1 // pushes the footer to the end of the screen
    },
    footer: {
        height: 100
    }
});

这样可以在不破坏应用程序布局的情况下更新和的样式，titleWrapper并且inputWrapper组件本身更易于重用:)

于 2016-08-11T08:44:23.090 回答
60

在 React Native 中， 的默认值flexDirection是column（与 CSS 不同，它是row）。

因此，flexDirection: 'column'横轴是水平的并且alignSelf向左/向右工作。

要将页脚固定到底部，请应用justifyContent: 'space-between'到容器

于 2016-08-11T04:11:18.180 回答
16

绝对位置是另一种修复页脚的方法，就像：

footer: {
    position: 'absolute',
    height: 40,
    left: 0, 
    top: WINDOW_HEIGHT - 40, 
    width: WINDOW_WIDTH,
}
于 2016-08-11T04:17:44.960 回答
14

对我来说，答案是为元素创建一个容器视图，然后为样式创建一个容器视图。

bottomContainer: {
    flex: 1,
    justifyContent: 'flex-end',
}
于 2020-01-24T05:51:14.483 回答
8

要将 a 固定View到底部，只需使用：marginTop: 'auto'。

在网上搜索了一个小时后，这对我有用。我试过试验，它奏效了！

于 2020-07-12T14:33:01.257 回答
7

考虑一个屏幕结构

<View style={styles.container}>
  <View style={styles.body}> ... </View>
  <View style={styles.footer}>...</View>
</View>

您可以使用利用 flex-grow 的 Flexbox 方法干净地完成它。

const Styles = StyleSheet.create({
  container:{
    flexDirection: 'column', // inner items will be added vertically
    flexGrow: 1,            // all the available vertical space will be occupied by it
    justifyContent: 'space-between' // will create the gutter between body and footer
  },
})

在此处输入图像描述

注意：在嵌套元素的情况下，您必须确保在使用 flexGrow 时父容器有足够的高度。在父母和孩子上设置背景颜色以进行调试。

于 2019-11-26T07:48:59.733 回答
6

为此，您可以使用样式表元素位置：'absolute'。

/*This is an Example to Align a View at the Bottom of Screen in React Native */
import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';
export default class App extends Component {
  render() {
    return (
      <View style={styles.containerMain}>
        <Text> Main Content Here</Text>
        <View style={styles.bottomView}>
          <Text style={styles.textStyle}>Bottom View</Text>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  containerMain: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  bottomView: {
    width: '100%',
    height: 50,
    backgroundColor: '#EE5407',
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute', //Here is the trick
    bottom: 0, //Here is the trick
  },
  textStyle: {
    color: '#fff',
    fontSize: 18,
  },
});

在此处输入图像描述

于 2019-02-21T19:22:28.003 回答
5

在滚动视图中嵌入其他内容

<View style={styles.container}>

  <ScrollView> {/* <- Add this */}
        <View style={styles.titleWrapper}>
            ...
        </View>
        <View style={styles.inputWrapper}>
            ...
        </View>
    </ScrollView>

    <View style={styles.footer}>
        ...
    </View>
</View>
于 2018-08-24T03:27:44.420 回答
4

你可以使用这种风格：

row: {
    flexDirection: 'row',
    height: 50,
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute', //Here is the trick
    bottom: 0,
}
于 2020-05-01T07:33:13.713 回答
3

position: 'absolute', bottom: 0,在 react native 中，您需要为按钮视图提供一些属性

于 2019-06-24T13:15:00.343 回答
1 
import React from 'react'
import { View, StyleSheet } from 'react-native'
function moveToBottom(component) {
  return (
    <View style={styles.container}>
      {component}
    </View>
  )
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-end',
    marginBottom: 36
  }
})
export default moveToBottom

现在在我们的屏幕中，我们只需要导入：

import moveToBottom from 'library/utils/moveToBottom'

并包装我们的按钮：

{
  moveToBottom(
    <ImageButton
      style={styles.button}
      title={strings.onboarding.welcome.button}
      onPress={() => {
        this.props.navigation.navigate('Term')
      }} />
  )
}

我对其进行了测试，我认为这是尊重布局而不将事物固定到底部的最佳选择，如果除了 react-native 之外还使用 react-native-web ，这是不可能的，因为人们调整大小并且元素在每个上方重叠。

资料来源：https ://medium.com/react-native-training/position-element-at-the-bottom-of-the-screen-using-flexbox-in-react-native-a00b3790ca42

于 2020-01-26T11:19:24.787 回答
1

我有一个案例，我必须在这样的情况下显示 a image，bottom正如你所看到的sky-blue image那样。not poped-upkeyboard

在此处输入图像描述

所以为此我在底部为图像创建了一个功能组件。

import React, { useEffect, useState } from "react";
import { Keyboard, View, Image } from "react-native";

export const BottomImage = (props) => {

const [shouldShow, showImage] = useState(true);

useEffect(() => {
    Keyboard.addListener("keyboardDidShow", _keyboardDidShow);
    Keyboard.addListener("keyboardDidHide", _keyboardDidHide);

    return () => {
        Keyboard.removeListener("keyboardDidShow", _keyboardDidShow);
        Keyboard.removeListener("keyboardDidHide", _keyboardDidHide);
    };
}, []);

let _keyboardDidShow = () => {
    showImage(false)
}

let _keyboardDidHide = () => {
    showImage(true)
}


return (<ViewToRender show={shouldShow} src={props.image} />)
}

function ViewToRender(props) {
return props.show ? <Image style={{ position: 'absolute', bottom: 0 }} source={props.src} /> : <View />
}

要使用此底部图像，您必须将图像传递给它，例如：

<BottomImage image={AppImage.signupbottom} />
于 2020-04-23T21:22:50.240 回答
1

这可能有点棘手，因为父组件仍然可以影响具有“绝对”样式的子组件的高度，我也尝试像普通 HTML/CSS 一样执行“底部：0，高度：‘自动’”，但它没有工作得很好，我可能会创建一个通用组件，以确保视图可以适应屏幕大小。带有内容的视图的最终结果

<View> 组件参数

style={{ 
  position: 'absolute',
  left: 0, 
  padding: ContainerPadding,
  top: TopOffset,
  width: ScreenWidth
}}

onLayout={(event) => {
  var {x, y, width, height} = event.nativeEvent.layout; // get the View's dimensions after 1st render
  SetTopOffset(ScreenHeight - height - HeaderHeight); // Set 'top' to: screen size - height (of view) - parent top offset (optional if no parent offset)
}}

使用 useState：

const [TopOffset, SetTopOffset] = useState<number>(0); // Controls 'top' of screen
  • HeaderHeight是添加到我所有页面组件的高度，如果您没有任何顶部间距，您可以删除此变量。(currently set to 64 default and this variable is updated based on device)
  • ScreenWidth和ScreenHeight在这里计算：export const ScreenWidth = Dimensions.get('screen').width; export const ScreenHeight = Dimensions.get('screen').height;
  • ContainerPadding是我的项目中使用的通用填充数字(currently set to 12.5)
于 2022-01-27T02:17:37.293 回答