CSS 在 react-native 中使用 flex 使项目粘在底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38887069/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make an item stick to the bottom using flex in react-native
提问by Karl
Suppose this is the layout:
假设这是布局：
<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>
I want to make the view with the styles of footer to position at the bottom of the screen. I tried giving the alignSelfproperty to the footer, but instead of positioning at the bottom, it positions it to the right side of the screen. How can I make the footer item stick to the end? Thank you.
我想让带有页脚样式的视图位于屏幕底部。我尝试将alignSelf属性赋予页脚，但它没有将其定位在底部，而是将其定位到屏幕的右侧。如何使页脚项目坚持到底？谢谢你。
采纳答案by Michael Benjamin
In React Native, the default value of flexDirectionis column(unlike in CSS, where it is row).
在 React Native 中， 的默认值flexDirection是column（不像在 CSS 中，它是row）。
Hence, in flexDirection: 'column'the cross-axis is horizontal and alignSelfworks left/right.
因此，flexDirection: 'column'横轴是水平的，alignSelf向左/向右工作。
To pin your footer to the bottom, apply justifyContent: 'space-between'to the container
要将页脚固定到底部，请应用于justifyContent: 'space-between'容器
回答by David
I would use the following approach:
我会使用以下方法：
<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
}
});
This way the styles of titleWrapperand inputWrappercan be updated without breaking the layout of your app and the components themselves are easier to re-use :)
这样可以在不破坏应用程序布局的情况下更新titleWrapper和的样式，并且inputWrapper组件本身更易于重用:)
回答by CoderLim
Absolutely position is another way to fix footer, just like:
绝对位置是另一种修复页脚的方法，就像：
footer: {
position: 'absolute',
height: 40,
left: 0,
top: WINDOW_HEIGHT - 40,
width: WINDOW_WIDTH,
}
回答by snehal agrawal
To do this you can use the Stylesheet element?position: '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,
},
});
回答by NSYuJian
embed other content in a scrollview
在滚动视图中嵌入其他内容
<View style={styles.container}>
<ScrollView> {/* <- Add this */}
<View style={styles.titleWrapper}>
...
</View>
<View style={styles.inputWrapper}>
...
</View>
</ScrollView>
<View style={styles.footer}>
...
</View>
</View>
回答by ravi
In react native, there are some properties like position: 'absolute', bottom: 0,which you will want to give to your button view
在 React Native 中，有一些属性是position: 'absolute', bottom: 0,你想要给你的按钮视图的
回答by manuelBetancurt
for me the answer was to create a container view for the elements, then for the style.
对我来说，答案是为元素创建一个容器视图，然后为样式创建一个容器视图。
bottomContainer: {
flex: 1,
justifyContent: 'flex-end',
}
回答by Harishankar Joshi
You Can Use This Style
你可以使用这种风格
row: {
flexDirection: 'row',
height: 50,
justifyContent: 'center',
alignItems: 'center',
position: 'absolute', //Here is the trick
bottom: 0,
}
回答by Dimitri Kopriwa
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
Now in our screen, we just need to import:
现在在我们的屏幕中，我们只需要导入：
import moveToBottom from 'library/utils/moveToBottom'
import moveToBottom from 'library/utils/moveToBottom'
and wrap our button:
并包装我们的按钮：
{
moveToBottom(
<ImageButton
style={styles.button}
title={strings.onboarding.welcome.button}
onPress={() => {
this.props.navigation.navigate('Term')
}} />
)
}
I tested it and I approve it's the best option to respect the layout without having fixed things to bottom, which is not possible if you use react-native-web in addition of react-native, because people resize and elements overlap on each over.
我对其进行了测试，我认为这是尊重布局的最佳选择，而无需将内容固定到底部，如果除了 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
回答by Tushar Pandey
I have a case in which I have to show a imagein the bottomlike this, as you can see the sky-blueimageis notpoped-upwith keyboard.
我有，我有表现出的情况下，image在bottom这样的，你可以看到的sky-blueimage是notpoped-up有keyboard。
so for this I have created a functional component for image in bottom.
所以为此我在底部为图像创建了一个功能组件。
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 />
}and to use this Bottom image you have to pass your image to it like :
要使用此底部图像，您必须将图像传递给它，例如：
<BottomImage image={AppImage.signupbottom} />
