Question

假设这是布局：

<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属性赋予页脚，但不是定位在底部，而是将其定位到屏幕的右侧。如何让页脚项目坚持到底？谢谢。

Answer 1

我会使用以下方法：

<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的样式，并且组件本身更易于重复使用：）

Answer 2

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

因此，在flexDirection: 'column'中，横轴是水平的，alignSelf是左/右。

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

Answer 3

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

footer: {
    position: 'absolute',
    height: 40,
    left: 0, 
    top: WINDOW_HEIGHT - 40, 
    width: WINDOW_WIDTH,
 }

Answer 4

为此，您可以使用样式表元素的位置：“绝对”。

/*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,
  },
});

Answer 5

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

bottomContainer: {
    flex: 1,
    justifyContent: 'flex-end',
}

Answer 6

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

<View style={styles.container}>

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

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

Answer 7

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

这在网上搜索了一个小时后对我有用。我尝试进行实验，并且成功了！

Answer 8

您可以使用以下样式：

row: {
    flexDirection: 'row',
    height: 50,
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute', //Here is the trick
    bottom: 0,
}

Answer 9

在react native中，您将希望将诸如position: 'absolute', bottom: 0,之类的某些属性提供给按钮视图

Answer 10

考虑屏幕结构

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

您可以通过使用flex-grow的Flexbox方法轻松地做到这一点。

const Styles = StyleSheet.create({
  container:{
    flexDirection: 'columm', // 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时父容器具有足够的高度来使用。在父母和孩子上设置backgroundColor进行调试。

Answer 11

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

Answer 12

在某些情况下，我必须这样在image中显示bottom，因为您可以看到sky-blue image是not poped-up和keyboard。

为此，我在底部创建了图像的功能组件。

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} />

Answer 13

也许不是完美的，但是我的解决方案是使用负值在marginleft或right上。作为具有行和两个孩子的父母的一个视图。使用一种子样式具有负值，例如-50

使用flex in react-native使物品粘在底部

13 个答案: