blocks|key|2863269|text|在Reactinative中，flexDirection的默认值是column+(与CSS中的column不同，后者是row)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2863270|因此，在flexDirection:+'column'中，交叉轴是水平的，而alignSelf工作在左/右。|2863271|若要将页脚钉在底部，请将justifyContent:+'space-between'应用于容器。|2863272|entityMap^0|F|D|X|6|1B|6|1N|3|0|4|N|12|9|0|C|V|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]|$9|O|A|P|B|C]|$9|Q|A|R|B|C]|$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|J|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|K|$]]

In React Native, the default value of <code>flexDirection</code> is <code>column</code> (unlike in CSS, where it is <code>row</code>).

Hence, in <code>flexDirection: 'column'</code> the cross-axis is horizontal and <code>alignSelf</code> works left/right.

To pin your footer to the bottom, apply <code>justifyContent: 'space-between'</code> to the container

blocks|key|1462122|text|绝对位置是另一种修复页脚的方法，就像：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1462123|footer:+{
++++position:+'absolute',
++++height:+40,
++++left:+0,+
++++top:+WINDOW_HEIGHT+-+40,+
++++width:+WINDOW_WIDTH,
}|code-block|syntax|javascript|1462124|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Absolutely position is another way to fix footer, just like:
<pre><code>footer: {
 position: 'absolute',
 height: 40,
 left: 0, 
 top: WINDOW_HEIGHT - 40, 
 width: WINDOW_WIDTH,
}
</code></pre>

blocks|key|1462142|text|我将使用以下方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1462143|<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>|code-block|syntax|javascript|1462144|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
++++}
});|1462145|通过这种方式，可以更新titleWrapper和inputWrapper的样式，而不会破坏应用程序的布局，并且组件本身更易于重用:)|offset|length|style|CODE|1462146|entityMap^0|0|0|0|B|C|O|C|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|I|3|J|5|6|7|T|8|@$K|U|L|V|M|N]|$K|W|L|X|M|N]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|P|$]]

I would use the following approach:

<pre class="lang-js prettyprint-override"><code>&lt;View style={styles.container}&gt;

 &lt;View style={styles.contentContainer}&gt; {/* &lt;- Add this */}

 &lt;View style={styles.titleWrapper}&gt;
 ...
 &lt;/View&gt;
 &lt;View style={styles.inputWrapper}&gt;
 ...
 &lt;/View&gt;

 &lt;/View&gt;

 &lt;View style={styles.footer}&gt;
 ...
 &lt;/View&gt;
&lt;/View&gt;
</code></pre>

<pre class="lang-js prettyprint-override"><code>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
 }
});
</code></pre>

This way the styles of <code>titleWrapper</code> and <code>inputWrapper</code> can be updated without breaking the layout of your app and the components themselves are easier to re-use :)

blocks|key|1462151|text|在滚动视图中嵌入其他内容|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1462152|<View+style={styles.container}>

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

++++<View+style={styles.footer}>
++++++++...
++++</View>
</View>++++|code-block|syntax|javascript|1462153|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

embed other content in a scrollview

<pre><code>&lt;View style={styles.container}&gt;

 &lt;ScrollView&gt; {/* &lt;- Add this */}
 &lt;View style={styles.titleWrapper}&gt;
 ...
 &lt;/View&gt;
 &lt;View style={styles.inputWrapper}&gt;
 ...
 &lt;/View&gt;
 &lt;/ScrollView&gt;

 &lt;View style={styles.footer}&gt;
 ...
 &lt;/View&gt;
&lt;/View&gt; 
</code></pre>

blocks|key|2863369|text|要做到这一点，您可以使用样式表元素位置：‘绝对值’。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2863370|/*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%25',
++++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,
++},
});|code-block|syntax|javascript|2863371|​|2863372|📷|atomic|offset|length|2863373|2863374|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://developer.qcloudimg.com/http-save/yehe-900000/e8b0671c116aa9d4a5ffa5cc020058f1.png|imageAlt^0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Z|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|10|8|@]|9|@$L|11|M|12|1|13]]|A|$]]|$1|N|3|H|5|6|7|14|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V|W|-4]]]]

To do this you can use the Stylesheet element position: 'absolute'.

<pre><code>/*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 (
 &lt;View style={styles.containerMain}&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;View style={styles.bottomView}&gt;
 &lt;Text style={styles.textStyle}&gt;Bottom View&lt;/Text&gt;
 &lt;/View&gt;
 &lt;/View&gt;
 );
 }
}
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,
 },
});
</code></pre>

<a href="https://i.stack.imgur.com/YMMHt.png" rel="noreferrer"><img src="https://i.stack.imgur.com/YMMHt.png" alt="enter image description here"></a>

blocks|key|2112542|text|在react本机中，有一些属性，如position:+'absolute',+bottom:+0,，您希望将这些属性提供给按钮视图。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2112543|entityMap^0|H|W|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

In react native, there are some properties like <code>position: 'absolute', bottom: 0,</code> which you will want to give to your button view

blocks|key|2863438|text|考虑屏幕结构|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2863439|<View+style={styles.container}>
++<View+style={styles.body}>+...+</View>
++<View+style={styles.footer}>...</View>
</View>|code-block|syntax|javascript|2863440|您可以使用Flexbox方法干净地使用flex-grow。|2863441|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
++},
})|2863442|​|2863443|📷|atomic|offset|length|2863444|2863445|注意事项：在嵌套元素的情况下，您必须确保父容器在使用flexGrow时具有足够的高度。将父级和子级上的backgroundColor设置为调试。|style|BOLD|2863446|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://developer.qcloudimg.com/http-save/yehe-900000/7489d99cf89f9d7283f262eded1d9cbd.png|imageAlt^0|0|0|0|0|0|0|1|0|0|0|0|4|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|16|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|17|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|18|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|19|8|@]|9|@]|A|$]]|$1|M|3|N|5|O|7|1A|8|@]|9|@$P|1B|Q|1C|1|1D]]|A|$]]|$1|R|3|L|5|6|7|1E|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1F|8|@$P|1G|Q|1H|U|V]]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13|14|-4]]]]

Consider a screen structure
<pre><code>&lt;View style={styles.container}&gt;
 &lt;View style={styles.body}&gt; ... &lt;/View&gt;
 &lt;View style={styles.footer}&gt;...&lt;/View&gt;
&lt;/View&gt;
</code></pre>
You can do it cleanly using Flexbox approach utilizing flex-grow.
<pre><code>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
 },
})
</code></pre>
<a href="https://i.stack.imgur.com/5Y6fS.png" rel="noreferrer"><img src="https://i.stack.imgur.com/5Y6fS.png" alt="enter image description here" /></a>
Note: In case of nested elements, you have to ensure that the parent container has enough height to work with when using flexGrow. Set backgroundColor on parents and child to debug.

blocks|key|1462317|text|对我来说，答案是为元素创建容器视图，然后为样式创建容器视图。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1462318|bottomContainer:+{
++++flex:+1,
++++justifyContent:+'flex-end',
}|code-block|syntax|javascript|1462319|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

for me the answer was to create a container view for the elements, then for the style.
<pre><code>bottomContainer: {
 flex: 1,
 justifyContent: 'flex-end',
}
</code></pre>

blocks|key|2863489|text|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|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2863490|现在，在我们的屏幕上，我们只需要导入：|unstyled|2863491|import+moveToBottom+from+'library/utils/moveToBottom'|offset|length|style|CODE|2863492|把我们的纽扣包起来：|2863493|{
++moveToBottom(
++++<ImageButton
++++++style={styles.button}
++++++title={strings.onboarding.welcome.button}
++++++onPress={()+=>+{
++++++++this.props.navigation.navigate('Term')
++++++}}+/>
++)
}|2863494|我测试了它，并且我同意这是最好的选择，尊重布局，而没有固定的东西底部，这是不可能的，如果你使用的反应-本机-网站，加上反应-本机，因为人们调整大小和元素重叠在每一层。|2863495|来源：https://medium.com/react-native-training/position-element-at-the-bottom-of-the-screen-using-flexbox-in-react-native-a00b3790ca42|2863496|entityMap|0|LINK|mutability|MUTABLE|url|https://medium.com/react-native-training/position-element-at-the-bottom-of-the-screen-using-flexbox-in-react-native-a00b3790ca42^0|0|0|0|1H|0|0|0|0|3|3K|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|13|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|14|8|@$I|15|J|16|K|L]]|9|@]|A|$]]|$1|M|3|N|5|F|7|17|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|A|$B|C]]|$1|Q|3|R|5|F|7|19|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|1A|8|@]|9|@$I|1B|J|1C|1|1D]]|A|$]]|$1|U|3|-4|5|F|7|1E|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]]]

<pre class="lang-js prettyprint-override"><code>import React from 'react'
import { View, StyleSheet } from 'react-native'
function moveToBottom(component) {
 return (
 &lt;View style={styles.container}&gt;
 {component}
 &lt;/View&gt;
 )
}
const styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: 'flex-end',
 marginBottom: 36
 }
})
export default moveToBottom
</code></pre>

Now in our screen, we just need to import:

<code>import moveToBottom from 'library/utils/moveToBottom'</code>

and wrap our button:

<pre class="lang-js prettyprint-override"><code>{
 moveToBottom(
 &lt;ImageButton
 style={styles.button}
 title={strings.onboarding.welcome.button}
 onPress={() =&gt; {
 this.props.navigation.navigate('Term')
 }} /&gt;
 )
}
</code></pre>

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.

Source: <a href="https://medium.com/react-native-training/position-element-at-the-bottom-of-the-screen-using-flexbox-in-react-native-a00b3790ca42" rel="nofollow noreferrer">https://medium.com/react-native-training/position-element-at-the-bottom-of-the-screen-using-flexbox-in-react-native-a00b3790ca42</a>

blocks|key|1462366|text|在我的例子中，我必须像这样在bottom中显示一个bottom，因为您可以看到sky-blue+image+is+not+poped-up和keyboard。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1462367|​|1462368|📷|atomic|1462369|1462370|为此，我为底部的图像创建了一个功能组件。|1462371|1462372|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+/>
}|code-block|syntax|javascript|1462373|1462374|要使用下面的图像，您必须将图像传递给它，如下所示：|1462375|<BottomImage+image={AppImage.signupbottom}+/>|1462376|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://developer.qcloudimg.com/http-save/yehe-900000/d7db7e7f40ebed7402f0e433554f5179.png|imageAlt^0|E|6|P|6|13|8|1C|5|1L|3|1P|8|1Y|8|0|0|0|1|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@$9|18|A|19|B|C]|$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]|$9|1G|A|1H|B|C]|$9|1I|A|1J|B|C]|$9|1K|A|1L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1M|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1N|8|@]|D|@$9|1O|A|1P|1|1Q]]|E|$]]|$1|K|3|G|5|6|7|1R|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|1S|8|@]|D|@]|E|$]]|$1|N|3|G|5|6|7|1T|8|@]|D|@]|E|$]]|$1|O|3|P|5|Q|7|1U|8|@]|D|@]|E|$R|S]]|$1|T|3|G|5|6|7|1V|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|1W|8|@]|D|@]|E|$]]|$1|W|3|X|5|Q|7|1X|8|@]|D|@]|E|$R|S]]|$1|Y|3|-4|5|6|7|1Y|8|@]|D|@]|E|$]]]|Z|$10|$5|11|12|13|E|$14|15|16|-4]]]]

I have a case in which I have to show a <code>image</code> in the <code>bottom</code> like this, as you can see the <code>sky-blue</code> <code>image</code> is <code>not</code> <code>poped-up</code> with <code>keyboard</code>.

<a href="https://i.stack.imgur.com/QG53j.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QG53j.png" alt="enter image description here"></a>

so for this I have created a functional component for image in bottom.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>import React, { useEffect, useState } from "react";
import { Keyboard, View, Image } from "react-native";

export const BottomImage = (props) =&gt; {

const [shouldShow, showImage] = useState(true);

useEffect(() =&gt; {
 Keyboard.addListener("keyboardDidShow", _keyboardDidShow);
 Keyboard.addListener("keyboardDidHide", _keyboardDidHide);

 return () =&gt; {
 Keyboard.removeListener("keyboardDidShow", _keyboardDidShow);
 Keyboard.removeListener("keyboardDidHide", _keyboardDidHide);
 };
}, []);

let _keyboardDidShow = () =&gt; {
 showImage(false)
}

let _keyboardDidHide = () =&gt; {
 showImage(true)
}


return (&lt;ViewToRender show={shouldShow} src={props.image} /&gt;)
}

function ViewToRender(props) {
return props.show ? &lt;Image style={{ position: 'absolute', bottom: 0 }} source={props.src} /&gt; : &lt;View /&gt;
}</code></pre>
</div>
</div>


and to use this Bottom image you have to pass your image to it like :

<pre><code>&lt;BottomImage image={AppImage.signupbottom} /&gt;
</code></pre>

blocks|key|1462390|text|您可以使用这种样式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1462391|row:+{
++++flexDirection:+'row',
++++height:+50,
++++justifyContent:+'center',
++++alignItems:+'center',
++++position:+'absolute',+//Here+is+the+trick
++++bottom:+0,
}|code-block|syntax|javascript|1462392|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can use this style:
<pre><code>row: {
 flexDirection: 'row',
 height: 50,
 justifyContent: 'center',
 alignItems: 'center',
 position: 'absolute', //Here is the trick
 bottom: 0,
}
</code></pre>

blocks|key|2112682|text|要将View修复到底部，只需使用：marginTop:+'auto'。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2112683|在网上搜索了一个小时之后，这个方法对我有效了。我试着做实验，结果成功了！|2112684|entityMap^0|2|4|H|H|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

To fix a <code>View</code> to the bottom, simply use: <code>marginTop: 'auto'</code> .
This worked for me after searching like an hour on the net. I tried experimenting and it worked!

blocks|key|1462468|text|这可能有点棘手，因为父组件仍然可以影响具有‘绝对’样式的子组件的高度，我还尝试了使用“底部:+0，高度：'auto'”，就像普通的HTML/CSS一样，但是效果不太好，接下来我可能会创建一个通用组件，以确保视图能够适合屏幕大小。有内容视图的最终结果|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1462469|组件参数|style|BOLD|1462470|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)
}}|code-block|syntax|javascript|1462471|使用useState：|1462472|const+[TopOffset,+SetTopOffset]+=+useState<number>(0);+//+Controls+'top'+of+screen|1462473|HeaderHeight是添加到所有页面组件中的高度，如果没有任何顶部间距，则可以删除此变量。(currently+set+to+64+default+and+this+variable+is+updated+based+on+device)|unordered-list-item|CODE|1462474|ScreenWidth和ScreenHeight在这里计算：export+const+ScreenWidth+=+Dimensions.get('screen').width;+export+const+ScreenHeight+=+Dimensions.get('screen').height;|1462475|ContainerPadding是在我的项目(currently+set+to+12.5)中使用的通用填充号。|1462476|entityMap|0|LINK|mutability|MUTABLE|url|https://i.stack.imgur.com/VAIqa.jpg^0|36|A|0|0|0|4|0|0|0|0|1B|22|0|U|3B|0|M|N|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@$A|17|B|18|1|19]]|C|$]]|$1|D|3|E|5|6|7|1A|8|@$A|1B|B|1C|F|G]]|9|@]|C|$]]|$1|H|3|I|5|J|7|1D|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|1E|8|@]|9|@]|C|$]]|$1|O|3|P|5|J|7|1F|8|@]|9|@]|C|$K|L]]|$1|Q|3|R|5|S|7|1G|8|@$A|1H|B|1I|F|T]]|9|@]|C|$]]|$1|U|3|V|5|S|7|1J|8|@$A|1K|B|1L|F|T]]|9|@]|C|$]]|$1|W|3|X|5|S|7|1M|8|@$A|1N|B|1O|F|T]]|9|@]|C|$]]|$1|Y|3|-4|5|6|7|1P|8|@]|9|@]|C|$]]]|Z|$10|$5|11|12|13|C|$14|15]]]]

This can be a bit tricky given that parent components can still affect the height of children with 'absolute' styles, I also tried doing &quot;bottom: 0, height: 'auto'&quot; like with normal HTML/CSS, but it didn't work out well, down the line I'll probably create a general component which makes sure the view can fit into the screen size. <a href="https://i.stack.imgur.com/VAIqa.jpg" rel="nofollow noreferrer">End result of view with contents</a>
&lt;View&gt; component parameters
<pre><code>style={{ 
 position: 'absolute',
 left: 0, 
 padding: ContainerPadding,
 top: TopOffset,
 width: ScreenWidth
}}

onLayout={(event) =&gt; {
 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)
}}
</code></pre>
With useState:
<pre><code>const [TopOffset, SetTopOffset] = useState&lt;number&gt;(0); // Controls 'top' of screen
</code></pre>
<ul>
<li>HeaderHeight is the height which is added to all my page components, you can remove this variable if you do not have any top spacing. <code>(currently set to 64 default and this variable is updated based on device)</code></li>
<li>ScreenWidth &amp; ScreenHeight are calculated here: <code>export const ScreenWidth = Dimensions.get('screen').width; export const ScreenHeight = Dimensions.get('screen').height;</code></li>
<li>ContainerPadding is a general padding number used across my project <code>(currently set to 12.5)</code></li>
</ul>

blocks|key|2112792|text|从本质上讲，简单的例子是基于@David的回答：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2112793|<View+style={{flex:+1}}>
++<View+style={{flex:+1}}>
++++<Text>Main+content</Text>
++</View>
++<Text>Footer</Text>
</View>|code-block|syntax|javascript|2112794|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Quick example in essence, based on @David's answer:
<pre><code>&lt;View style={{flex: 1}}&gt;
 &lt;View style={{flex: 1}}&gt;
 &lt;Text&gt;Main content&lt;/Text&gt;
 &lt;/View&gt;
 &lt;Text&gt;Footer&lt;/Text&gt;
&lt;/View&gt;
</code></pre>

Suppose this is the layout:

<pre><code>&lt;View style={styles.container}&gt;
 &lt;View style={styles.titleWrapper}&gt;
 ...
 ...
 &lt;/View&gt;
 &lt;View style={styles.inputWrapper}&gt;
 ...
 ...
 &lt;/View&gt;

 &lt;View style={styles.footer}&gt;
 &lt;TouchableOpacity&gt;
 &lt;View style={styles.nextBtn}&gt;
 &lt;Text style={styles.nextBtnText}&gt;Next&lt;/Text&gt;
 &lt;/View&gt;
 &lt;/TouchableOpacity&gt;
 &lt;/View&gt;
&lt;/View&gt;
</code></pre>

I want to make the view with the styles of footer to position at the bottom of the screen. I tried giving the <code>alignSelf</code> property 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.

Make an item stick to the bottom using flex in react-native

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

假设这是布局：<View style={styles.container}> <View style={styles.titleWrapper}> ... ... </View> <View style={styles.inputWrapper}> ... ...

问使用react本机中的flex将一个项目固定在底部。
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用react本机中的flex将一个项目固定在底部。EN