entityMap|blocks|key|5v3ah|text|在我的脑海中，你可以用一个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|c2h5k|ScrollView|8nnjf|..。你的顶层容器可以是一个flex容器，里面有一个顶部的ScrollView和底部的脚注。然后，在ScrollView中，只需像往常一样将应用程序的其余部分放入即可。^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|G|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|H|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|I|9|@]|A|@]|B|$]]]]

Off the top of my head you could do this with a <a href="https://facebook.github.io/react-native/docs/scrollview.html" rel="noreferrer">ScrollView</a>. Your top-level container could be a flex container, inside that have a ScrollView at the top and your footer at the bottom. Then inside the ScrollView just put the rest of your app as normal.

entityMap|blocks|key|a4rq0|text|这是基于Colin的Ramsay答案的实际代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|cr34f|main
++footer|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

Here's the actual code based on Colin's Ramsay answer:

<pre class="lang-html prettyprint-override"><code>&lt;View style={{flex: 1}}&gt;
 &lt;ScrollView&gt;main&lt;/ScrollView&gt;
 &lt;View&gt;&lt;Text&gt;footer&lt;/Text&gt;&lt;/View&gt;
&lt;/View&gt;
</code></pre>

entityMap|blocks|key|97kvk|text|首先获取Dimension，然后通过flex样式对其进行操作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|6o3bb|var+Dimensions+=+require('Dimensions')
var+{width,+height}+=+Dimensions.get('window')|code-block|syntax|javascript|cl1vh|在渲染中|brjk8|main
++++footer|139fh|另一种方法是使用flex|5uc1l|main
++++footer^0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|P|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|Q|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|R|9|@]|A|@]|B|$]]|$2|J|4|K|6|E|8|S|9|@]|A|@]|B|$F|G]]|$2|L|4|M|6|7|8|T|9|@]|A|@]|B|$]]|$2|N|4|O|6|E|8|U|9|@]|A|@]|B|$F|G]]]]

You get the Dimension first and then manipulate it through flex style

<pre><code>var Dimensions = require('Dimensions')
var {width, height} = Dimensions.get('window')
</code></pre>

In render

<pre><code>&lt;View style={{flex: 1}}&gt;
 &lt;View style={{width: width, height: height - 200}}&gt;main&lt;/View&gt;
 &lt;View style={{width: width, height: 200}}&gt;footer&lt;/View&gt;
&lt;/View&gt;
</code></pre>

The other method is to use flex

<pre><code>&lt;View style={{flex: 1}}&gt;
 &lt;View style={{flex: .8}}&gt;main&lt;/View&gt;
 &lt;View style={{flex: .2}}&gt;footer&lt;/View&gt;
&lt;/View&gt;
</code></pre>

entityMap|blocks|key|rf5u|text|我在我的应用程序中对按钮使用了固定的页脚。我实现固定脚注的方式如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|99lh|my+text
My+fixed+footer|code-block|syntax|javascript|cmkcc|如果需要在键盘出现时将页脚上移，例如，您可以使用：|erm1p|const+{++DeviceEventEmitter+}+=+React

class+MyClass+{
++constructor()+{
+++++this.state+=+{
+++++++btnLocation:+0
+++++}
++}

++componentWillMount()+{
+++++DeviceEventEmitter.addListener('keyboardWillShow',+this.keyboardWillShow.bind(this))
+++++DeviceEventEmitter.addListener('keyboardWillHide',+this.keyboardWillHide.bind(this))
++}

++keyboardWillShow(e)+{
++++this.setState({btnLocation:+e.endCoordinates.height})
++}

++keyboardWillHide(e)+{
++++this.setState({btnLocation:+0})
++}
}|e5do3|然后在固定脚注类中使用{bottom:+this.state.btnLocation}。我希望这能有所帮助！^0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|N|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|O|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|P|9|@]|A|@]|B|$]]|$2|J|4|K|6|E|8|Q|9|@]|A|@]|B|$F|G]]|$2|L|4|M|6|7|8|R|9|@]|A|@]|B|$]]]]

I'm using fixed footers for buttons in my app. The way I implement a fixed footer is like so:

<pre><code>&lt;View style={{flex: 1}}&gt;
&lt;View&gt;&lt;Text&gt;my text&lt;/Text&gt;&lt;/View&gt;
&lt;View style={{position: 'absolute', left: 0, right: 0, bottom: 0}}&gt;&lt;Text&gt;My fixed footer&lt;/Text&gt;&lt;/View&gt;
&lt;/View&gt;
</code></pre>

And if need the footer to move up when a keyboard appears for instance you can use:

<pre><code>const { DeviceEventEmitter } = React

class MyClass {
 constructor() {
 this.state = {
 btnLocation: 0
 }
 }

 componentWillMount() {
 DeviceEventEmitter.addListener('keyboardWillShow', this.keyboardWillShow.bind(this))
 DeviceEventEmitter.addListener('keyboardWillHide', this.keyboardWillHide.bind(this))
 }

 keyboardWillShow(e) {
 this.setState({btnLocation: e.endCoordinates.height})
 }

 keyboardWillHide(e) {
 this.setState({btnLocation: 0})
 }
}
</code></pre>

Then use {bottom: this.state.btnLocation} in your fixed footer class. I hope this helps!

entityMap|0|type|IMAGE|mutability|IMMUTABLE|data|imageUrl|https://ask.qcloudimg.com/http-save/actteam/15891c3d64dd09e5751294e689e42692.png|imageAlt|blocks|key|earjn|text|@Alexander感谢您的解决方案|unstyled|depth|inlineStyleRanges|entityRanges|ckhkc|下面的代码就是你想要的|fg9mc|import+React,+{PropTypes,}+from+'react';
import+{View,+Text,+StyleSheet,TouchableHighlight,ScrollView,Image,+Component,+AppRegistry}+from+"react-native";

class+mainview+extends+React.Component+{
+constructor(props)+{
++++++super(props);

++}

++render()+{
++++return(
++++++
++++++++
++++++++++
++++++++++
++++++++++++++A
++++++++++
++++++++++
++++++++++++++B
++++++++++
++++++++++
++++++
++++);
++}
}

class+ContainerView+extends+React.Component+{
constructor(props)+{
++++++super(props);
}

render()+{
++++return(
++++++
++++++++++
+++++++++++++Example+for+ScrollView+and+Fixed+Footer
++++++++++
++++++
++++);
++}
}

var+styles+=+StyleSheet.create({
++mainviewStyle:+{
++flex:+1,
++flexDirection:+'column',
},
footer:+{
++position:+'absolute',
++flex:0.1,
++left:+0,
++right:+0,
++bottom:+-10,
++backgroundColor:'green',
++flexDirection:'row',
++height:80,
++alignItems:'center',
},
bottomButtons:+{
++alignItems:'center',
++justifyContent:+'center',
++flex:1,
},
footerText:+{
++color:'white',
++fontWeight:'bold',
++alignItems:'center',
++fontSize:18,
},
textStyle:+{
++alignSelf:+'center',
++color:+'orange'
},
scrollViewStyle:+{
++borderWidth:+2,
++borderColor:+'blue'
}
});

AppRegistry.registerComponent('TRYAPP',+()+=>+mainview)+//Entry+Point++++and+Root+Component+of+The+App|code-block|syntax|javascript|4oiln|下面是屏幕截图|7b3k4|​|14qqh|c036j|?|atomic|offset|length|8m52h|bg25o^0|0|0|0|0|0|0|0|1|0|0|0^^$0|$1|$2|3|4|5|6|$7|8|9|-4]]]|A|@$B|C|D|E|2|F|G|12|H|@]|I|@]|6|$]]|$B|J|D|K|2|F|G|13|H|@]|I|@]|6|$]]|$B|L|D|M|2|N|G|14|H|@]|I|@]|6|$O|P]]|$B|Q|D|R|2|F|G|15|H|@]|I|@]|6|$]]|$B|S|D|T|2|F|G|16|H|@]|I|@]|6|$]]|$B|U|D|-4|2|F|G|17|H|@]|I|@]|6|$]]|$B|V|D|W|2|X|G|18|H|@]|I|@$Y|19|Z|1A|B|1B]]|6|$]]|$B|10|D|-4|2|F|G|1C|H|@]|I|@]|6|$]]|$B|11|D|T|2|F|G|1D|H|@]|I|@]|6|$]]]]

@Alexander Thanks for solution

Below is code exactly what you looking for

<pre><code>import React, {PropTypes,} from 'react';
import {View, Text, StyleSheet,TouchableHighlight,ScrollView,Image, Component, AppRegistry} from "react-native";

class mainview extends React.Component {
 constructor(props) {
 super(props);

 }

 render() {
 return(
 &lt;View style={styles.mainviewStyle}&gt;
 &lt;ContainerView/&gt;
 &lt;View style={styles.footer}&gt;
 &lt;TouchableHighlight style={styles.bottomButtons}&gt;
 &lt;Text style={styles.footerText}&gt;A&lt;/Text&gt;
 &lt;/TouchableHighlight&gt;
 &lt;TouchableHighlight style={styles.bottomButtons}&gt;
 &lt;Text style={styles.footerText}&gt;B&lt;/Text&gt;
 &lt;/TouchableHighlight&gt;
 &lt;/View&gt;
 &lt;/View&gt;
 );
 }
}

class ContainerView extends React.Component {
constructor(props) {
 super(props);
}

render() {
 return(
 &lt;ScrollView style = {styles.scrollViewStyle}&gt;
 &lt;View&gt;
 &lt;Text style={styles.textStyle}&gt; Example for ScrollView and Fixed Footer&lt;/Text&gt;
 &lt;/View&gt;
 &lt;/ScrollView&gt;
 );
 }
}

var styles = StyleSheet.create({
 mainviewStyle: {
 flex: 1,
 flexDirection: 'column',
},
footer: {
 position: 'absolute',
 flex:0.1,
 left: 0,
 right: 0,
 bottom: -10,
 backgroundColor:'green',
 flexDirection:'row',
 height:80,
 alignItems:'center',
},
bottomButtons: {
 alignItems:'center',
 justifyContent: 'center',
 flex:1,
},
footerText: {
 color:'white',
 fontWeight:'bold',
 alignItems:'center',
 fontSize:18,
},
textStyle: {
 alignSelf: 'center',
 color: 'orange'
},
scrollViewStyle: {
 borderWidth: 2,
 borderColor: 'blue'
}
});

AppRegistry.registerComponent('TRYAPP', () =&gt; mainview) //Entry Point and Root Component of The App
</code></pre>

Below is the Screenshot

<a href="https://i.stack.imgur.com/FZaVT.png" rel="noreferrer"><img src="https://i.stack.imgur.com/FZaVT.png" alt="ScrollView With Fixed Footer"></a>

entityMap|blocks|key|ef0n7|text|您可能还想看看NativeBase+(|type|unstyled|depth|inlineStyleRanges|entityRanges|data|drflu|http://nativebase.io|53k3k|)。这是一个React+Native的组件库，其中包含一些很好的布局结构(|amp4r|http://nativebase.io/docs/v2.0.0/components#anatomy|dva9|)包括页眉和页脚。|9v968|它有点像移动设备的Bootstrap。^0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|M|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|N|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|O|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|P|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|Q|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|R|9|@]|A|@]|B|$]]]]

You might also want to take a look at NativeBase (<a href="http://nativebase.io" rel="noreferrer">http://nativebase.io</a>). This a library of components for React Native that include some nice layout structure (<a href="http://nativebase.io/docs/v2.0.0/components#anatomy" rel="noreferrer">http://nativebase.io/docs/v2.0.0/components#anatomy</a>) including Headers and Footers.

It's a bit like Bootstrap for Mobile.

entityMap|blocks|key|1onps|text|我这样做的方式是有一个具有flex1的视图(让它称为P)，然后在该视图中有另外两个视图(C1和C2)，分别具有flex0.9和0.1+(您可以将flex高度更改为所需的值)。然后，在C1中有一个滚动视图。这对我来说非常有效。下面是一个例子。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|e270a|scrollable+section
++++++++
++++
++++
++++++++fixed+footer|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

The way I did this was to have a view (lets call it P) with flex 1, then inside that view have 2 more views (C1 and C2) with flex 0.9 and 0.1 respectively (you can change the flex heights to required values). Then, inside the C1 have a scrollview. This worked perfectly for me. Example below.

<pre><code>&lt;View style={{flex: 1}}&gt;
 &lt;View style={{flex: 0.9}}&gt;
 &lt;ScrollView&gt;
 &lt;Text style={{marginBottom: 500}}&gt;scrollable section&lt;/Text&gt;
 &lt;/ScrollView&gt;
 &lt;/View&gt;
 &lt;View style={{flex: 0.1}}&gt;
 &lt;Text&gt;fixed footer&lt;/Text&gt;
 &lt;/View&gt;
&lt;/View&gt;
</code></pre>

entityMap|blocks|key|78o55|text|最好的方法是使用justifyContent属性|type|unstyled|depth|inlineStyleRanges|entityRanges|data|a940p|fixed+footer|code-block|syntax|javascript|ei2b2|如果屏幕上有多个视图元素，则可以使用|ejbku|view+1
++++
++++
++++++++view+2
++++
++++
++++++++fixed+footer^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|L|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|M|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|N|9|@]|A|@]|B|$]]|$2|J|4|K|6|E|8|O|9|@]|A|@]|B|$F|G]]]]

The best way is to use justifyContent property

<pre><code>&lt;View style={{flexDirection:'column',justifyContent:'flex-end'}}&gt;
 &lt;View&gt;
 &lt;Text&gt;fixed footer&lt;/Text&gt;
 &lt;/View&gt;
&lt;/View&gt;
</code></pre>

if you have multiple view elements on screen, then you can use 

<pre><code>&lt;View style={{flexDirection:'column',justifyContent:'space-between'}}&gt;
 &lt;View&gt;
 &lt;Text&gt;view 1&lt;/Text&gt;
 &lt;/View&gt;
 &lt;View&gt;
 &lt;Text&gt;view 2&lt;/Text&gt;
 &lt;/View&gt;
 &lt;View&gt;
 &lt;Text&gt;fixed footer&lt;/Text&gt;
 &lt;/View&gt;
&lt;/View&gt;
</code></pre>

entityMap|blocks|key|4lfab|text|我发现使用flex是最简单的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|a4gd1|//Main+Activity
++
++
++++//Footer|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

I found using flex to be the simplest solution.

<pre><code>&lt;View style={{flex:1, 
 justifyContent: 'space-around', 
 alignItems: 'center',
 flexDirection: 'row',}}&gt;

 &lt;View style={{flex:8}}&gt;
 //Main Activity
 &lt;/View&gt;
 &lt;View style={{flex:1}}&gt;
 //Footer
 &lt;/View&gt;

 &lt;/View&gt;
</code></pre>

entityMap|0|type|IMAGE|mutability|IMMUTABLE|data|imageUrl|https://ask.qcloudimg.com/http-save/actteam/9c406d9b6d9c402ba5d4f447bb95348c.png|imageAlt|blocks|key|acgsl|text|这里有一些简单的东西：|unstyled|depth|inlineStyleRanges|entityRanges|2ttc6|如果这种方法不需要ScrollView，你可以使用下面的代码来实现如下所示：|84bqh|4hsr6|​|61vcp|a16rc|?|atomic|offset|length|3cspj|3v9hp^0|0|0|0|0|0|0|1|0|0|0^^$0|$1|$2|3|4|5|6|$7|8|9|-4]]]|A|@$B|C|D|E|2|F|G|W|H|@]|I|@]|6|$]]|$B|J|D|K|2|F|G|X|H|@]|I|@]|6|$]]|$B|L|D|-4|2|F|G|Y|H|@]|I|@]|6|$]]|$B|M|D|N|2|F|G|Z|H|@]|I|@]|6|$]]|$B|O|D|-4|2|F|G|10|H|@]|I|@]|6|$]]|$B|P|D|Q|2|R|G|11|H|@]|I|@$S|12|T|13|B|14]]|6|$]]|$B|U|D|-4|2|F|G|15|H|@]|I|@]|6|$]]|$B|V|D|N|2|F|G|16|H|@]|I|@]|6|$]]]]

Simple stuff here:

<blockquote>
 Incase you don't need a ScrollView for this approach you can go with the below code to achieve Something like this : 
</blockquote>

<a href="https://i.stack.imgur.com/dNEaV.png" rel="noreferrer"><img src="https://i.stack.imgur.com/dNEaV.png" alt="Something like this"></a>

<pre><code>&lt;View style={{flex: 1, backgroundColor:'grey'}}&gt;
 &lt;View style={{flex: 1, backgroundColor: 'red'}} /&gt;
 &lt;View style={{height: 100, backgroundColor: 'green'}} /&gt;
&lt;/View&gt;
</code></pre>

entityMap|blocks|key|c4khc|text|可以在原生的react中实现类似的功能。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|emp4o|let+footerStyle+=+{
++position:+'absolute',
++bottom:+0,
}|code-block|syntax|javascript|bhmoq|不过，有几件事需要牢记。|3h4lb|相对于其父元素定位元素。|bukpp|您可能需要手动设置元素的宽度和高度。|afbbd|当方向改变时，宽度和高度也会改变。这必须手动管理|c5ph7|一个实用的样式定义应该是这样的：|33elm|import+{+Dimensions+}+from+'react-native';

var+screenWidth+=+Dimensions.get('window').width;+//full+screen+width

let+footerStyle+=+{
++position:+'absolute',
++bottom:+0,
++width:+screenWidth,
++height:+60
}^0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|T|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|U|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|V|9|@]|A|@]|B|$]]|$2|J|4|K|6|7|8|W|9|@]|A|@]|B|$]]|$2|L|4|M|6|7|8|X|9|@]|A|@]|B|$]]|$2|N|4|O|6|7|8|Y|9|@]|A|@]|B|$]]|$2|P|4|Q|6|7|8|Z|9|@]|A|@]|B|$]]|$2|R|4|S|6|E|8|10|9|@]|A|@]|B|$F|G]]]]

One could achieve something similar in react native with <code>position: absolute</code>

<pre><code>let footerStyle = {
 position: 'absolute',
 bottom: 0,
}
</code></pre>

There are a few things to keep in mind though.

<ol>
<li><code>absolute</code> positions the element relative to its parent.</li>
<li>You might have to set the width and hight of the element manually.</li>
<li>Width and hight will change when orientation changes. This has to be managed manually</li>
</ol>

A practical style definition would look something like this:

<pre><code>import { Dimensions } from 'react-native';

var screenWidth = Dimensions.get('window').width; //full screen width

let footerStyle = {
 position: 'absolute',
 bottom: 0,
 width: screenWidth,
 height: 60
}
</code></pre>

entityMap|blocks|key|90n6e|text|对于Android的问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5sbgu|在app/src/AndroidManifest.xml中，将windowSoftInputMode更改为以下内容。|8baf2|在使用react-native和keyboardAwareScroll的ios中，我对此完全没有问题。我正要实现一大堆代码来解决这个问题，直到有人给了我这个解决方案。效果很好。^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|G|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|H|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|I|9|@]|A|@]|B|$]]]]

For Android problems with this:

in app/src/AndroidManifest.xml change windowSoftInputMode to the following. 

<pre><code>&lt;activity
 android:windowSoftInputMode="stateAlwaysHidden|adjustPan"&gt;
</code></pre>

I had absolutely no problems with this in ios using react-native and keyboardAwareScroll. I was about to implement a ton of code to figure this out until someone gave me this solution. Worked perfectly.

entityMap|blocks|key|acqm9|text|如果您只使用react+native，那么您可以使用以下代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|8814f|{/*+Your+Main+Content*/}



+++{/*+Your+List+View+,etc+*/}




{/*+Your+Footer+*/}

+++{/*Elements*/}|code-block|syntax|javascript|bcnjk|此外，您还可以使用|6gjp8|https://docs.nativebase.io/|ecj3v|在您的react本机项目中，然后执行类似以下的操作|1u5ae|{/*Your+Main+Content*/}



+++{/*+Your+List+View+,etc+*/}




{/*Your+Footer*/}

+++{/*Elements*/}|7bmmp|反应|6lslj|_|abis5|原生|dpsi7|NativeBase.io^0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|X|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|Y|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|Z|9|@]|A|@]|B|$]]|$2|J|4|K|6|7|8|10|9|@]|A|@]|B|$]]|$2|L|4|M|6|7|8|11|9|@]|A|@]|B|$]]|$2|N|4|O|6|E|8|12|9|@]|A|@]|B|$F|G]]|$2|P|4|Q|6|7|8|13|9|@]|A|@]|B|$]]|$2|R|4|S|6|7|8|14|9|@]|A|@]|B|$]]|$2|T|4|U|6|7|8|15|9|@]|A|@]|B|$]]|$2|V|4|W|6|7|8|16|9|@]|A|@]|B|$]]]]

if you just use react native so you can use the following code

<pre><code>&lt;View style={{flex:1}}&gt;

{/* Your Main Content*/}
&lt;View style={{flex:3}}&gt;

&lt;ScrollView&gt;
 {/* Your List View ,etc */}
&lt;/ScrollView&gt;

&lt;/View&gt;

{/* Your Footer */}
&lt;View style={{flex:1}}&gt;
 {/*Elements*/}
&lt;/View&gt;


 &lt;/View&gt;
</code></pre>

also, you can use <a href="https://docs.nativebase.io/" rel="nofollow noreferrer">https://docs.nativebase.io/</a> in your react native project and then do something like the following

<pre><code>&lt;Container&gt;

{/*Your Main Content*/}
&lt;Content&gt;

&lt;ScrollView&gt;
 {/* Your List View ,etc */}
&lt;/ScrollView&gt;

&lt;/Content&gt;

{/*Your Footer*/}
&lt;Footer&gt;
 {/*Elements*/}
&lt;/Footer&gt;

&lt;/Container&gt;
</code></pre>

<h1>React_Native</h1>

<h1>NativeBase.io</h1>

entityMap|blocks|key|6ihga|text|当flex为正数时，它使组件变得灵活，并且其大小将与其flex值成比例。因此，flex设置为2的组件占用的空间是flex设置为1的组件的两倍。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|bue95|​|fg5v|//your+scroll+able+content+will+be+placed+above+your+fixed+footer+content.+
++++++++//when+your+content+will+grow+bigger+and+bigger+it+will+hide+behind+
++++++++//footer+content.+
+++++

+++++
++++++++//your+fixed+footer+content+will+sit+fixed+below+your+screen|code-block|syntax|javascript|ekheo^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|K|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|L|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|M|9|@]|A|@]|B|$H|I]]|$2|J|4|D|6|7|8|N|9|@]|A|@]|B|$]]]]

When flex is a positive number, it makes the component flexible and it will be sized proportional to its flex value. So a component with flex set to 2 will take twice the space as a component with flex set to 1.
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code> &lt;View style={{flex: 1}&gt;
 
 &lt;ScrollView style={{flex: 1}&gt;
 //your scroll able content will be placed above your fixed footer content. 
 //when your content will grow bigger and bigger it will hide behind 
 //footer content. 
 &lt;/ScrollView&gt;

 &lt;View style={styles.footerContainer}&gt;
 //your fixed footer content will sit fixed below your screen 
 &lt;/View&gt;

&lt;/View&gt;</code></pre>
</div>
</div>

entityMap|blocks|key|ck83f|text|在清单文件中设置android:windowSoftInputMode="adjustPan“，它将按照您的预期工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data^0^^$0|$]|1|@$2|3|4|5|6|7|8|C|9|@]|A|@]|B|$]]]]

Set android:windowSoftInputMode="adjustPan" in your manifest file, and it will work as you expect.

entityMap|blocks|key|8kase|text|我认为最好也是最简单的方法如下，只需将视图的其余部分放在一个内容中，并将页脚放在一个单独的视图中即可。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|435ej|`
+++
+++++
++++++Ur+contents
++++
++
++
++Footer
++
`|code-block|syntax|javascript|7tuqr|或者你也可以使用原生基础的页脚|a3bbn|`
++
++++
Ur+contents
++++
++

Footer

`^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|L|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|M|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|N|9|@]|A|@]|B|$]]|$2|J|4|K|6|E|8|O|9|@]|A|@]|B|$F|G]]]]

I think best and easy one would be as below, just place rest of ur view in a content and footer in a separate view.

<pre><code>`&lt;Container&gt;
 &lt;Content&gt;
 &lt;View&gt;
 Ur contents
 &lt;/View&gt;
 &lt;/Content&gt;
 &lt;View&gt;
 Footer
 &lt;/View&gt;
&lt;/Container&gt;`
</code></pre>

or u can use footer from native-base

<pre><code>`&lt;Container&gt;
 &lt;Content&gt;
 &lt;View&gt;
Ur contents
 &lt;/View&gt;
 &lt;/Content&gt;
&lt;Footer&gt;
Footer
&lt;/Footer&gt;
&lt;/Container&gt;`
</code></pre>

entityMap|blocks|key|cpqgk|text|下面是设置页脚和上面元素的代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|6p0dc|import+React,+{+Component+}+from+'react';
import+{+StyleSheet,+View,+Text,+ScrollView+}+from+'react-native';
export+default+class+App+extends+Component+{
++++render()+{
++++++return+(
++++++
++++++++
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
+++++++++++Main+Content+Here
++++++++
++++++++
++++++++++Bottom+View
++++++++
++++++
++++);
++}
}
const+styles+=+StyleSheet.create({
++containerMain:+{
++++flex:+1,
++++alignItems:+'center',
++},
++bottomView:+{
++++width:+'100%25',
++++height:+50,
++++backgroundColor:+'#EE5407',
++++justifyContent:+'center',
++++alignItems:+'center',
++++position:+'absolute',
++++bottom:+0,
++},
++textStyle:+{
++++color:+'#fff',
++++fontSize:+18,
++},
});|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

Below is code to set footer and elements above.

<pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
import { StyleSheet, View, Text, ScrollView } from 'react-native';
export default class App extends Component {
 render() {
 return (
 &lt;View style={styles.containerMain}&gt;
 &lt;ScrollView&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;Text&gt; Main Content Here&lt;/Text&gt;
 &lt;/ScrollView&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',
 },
 bottomView: {
 width: '100%',
 height: 50,
 backgroundColor: '#EE5407',
 justifyContent: 'center',
 alignItems: 'center',
 position: 'absolute',
 bottom: 0,
 },
 textStyle: {
 color: '#fff',
 fontSize: 18,
 },
});
</code></pre>

entityMap|blocks|key|eb1u9|text|import+{Dimensions}+from+'react-native'

const+WIDTH+=+Dimensions.get('window').width;
const+HEIGHT+=+Dimensions.get('window').height;|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3n700|然后在write+this+styles上|unstyled|6pstb|position:+'absolute',
+top:+HEIGHT-80,
+left:+0,
+right:+0,|fq3hu|像个护身符一样工作^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|L|9|@]|A|@]|B|$C|D]]|$2|E|4|F|6|G|8|M|9|@]|A|@]|B|$]]|$2|H|4|I|6|7|8|N|9|@]|A|@]|B|$C|D]]|$2|J|4|K|6|G|8|O|9|@]|A|@]|B|$]]]]

<pre><code>import {Dimensions} from 'react-native'

const WIDTH = Dimensions.get('window').width;
const HEIGHT = Dimensions.get('window').height;
</code></pre>

then on the write this styles

<pre><code> position: 'absolute',
 top: HEIGHT-80,
 left: 0,
 right: 0,
</code></pre>

worked like a charm

entityMap|0|type|IMAGE|mutability|IMMUTABLE|data|imageUrl|https://ask.qcloudimg.com/http-save/actteam/2e45416667be9b8f668560ebe228b73b.png|imageAlt|1|https://ask.qcloudimg.com/http-save/actteam/d11c9546864ce230ede483f5b9e88f60.png|blocks|key|dmt45|text|建议1|unstyled|depth|inlineStyleRanges|entityRanges|9nekc|固定页脚的=>正文|e7f1q|...Header+or+Body
++++++++


++++++++
++++++++++...Footer|code-block|syntax|javascript|4ftj5|​|f3db1|3c5qp|?|atomic|offset|length|9apf6|gl0o|5l2vk|编辑2|etu1t|带制表符的=>正文和固定页脚|2uv8s|...Header+or+Body
++++++++


++++++++
++++++++++
++++++++++++
++++++++++++++
++++++++++++++++
++++++++++++++++++...Home
++++++++++++++
++++++++++++++
++++++++++++
++++++++++++
++++++++++++++
++++++++++++++++
++++++++++++++++++...Settings|fi37d|8hvmc|5bl7q|7kj6p|c3h2i|fu6ib|备注|7pmbv|import+{TouchableOpacity}+from+'react-native'|e08gl|优势|8ca6o|我们可以在没有react底部导航的情况下使用这个简单的页脚^0|0|0|0|0|0|0|1|0|0|0|0|0|0|0|0|0|0|1|1|0|0|0|0|0|0^^$0|$1|$2|3|4|5|6|$7|8|9|-4]]|A|$2|3|4|5|6|$7|B|9|-4]]]|C|@$D|E|F|G|2|H|I|1L|J|@]|K|@]|6|$]]|$D|L|F|M|2|H|I|1M|J|@]|K|@]|6|$]]|$D|N|F|O|2|P|I|1N|J|@]|K|@]|6|$Q|R]]|$D|S|F|T|2|H|I|1O|J|@]|K|@]|6|$]]|$D|U|F|-4|2|H|I|1P|J|@]|K|@]|6|$]]|$D|V|F|W|2|X|I|1Q|J|@]|K|@$Y|1R|Z|1S|D|1T]]|6|$]]|$D|10|F|-4|2|H|I|1U|J|@]|K|@]|6|$]]|$D|11|F|T|2|H|I|1V|J|@]|K|@]|6|$]]|$D|12|F|13|2|H|I|1W|J|@]|K|@]|6|$]]|$D|14|F|15|2|H|I|1X|J|@]|K|@]|6|$]]|$D|16|F|17|2|P|I|1Y|J|@]|K|@]|6|$Q|R]]|$D|18|F|T|2|H|I|1Z|J|@]|K|@]|6|$]]|$D|19|F|-4|2|H|I|20|J|@]|K|@]|6|$]]|$D|1A|F|W|2|X|I|21|J|@]|K|@$Y|22|Z|23|D|24]]|6|$]]|$D|1B|F|-4|2|H|I|25|J|@]|K|@]|6|$]]|$D|1C|F|T|2|H|I|26|J|@]|K|@]|6|$]]|$D|1D|F|1E|2|H|I|27|J|@]|K|@]|6|$]]|$D|1F|F|1G|2|P|I|28|J|@]|K|@]|6|$Q|R]]|$D|1H|F|1I|2|H|I|29|J|@]|K|@]|6|$]]|$D|1J|F|1K|2|H|I|2A|J|@]|K|@]|6|$]]]]

Suggestion 1
=&gt; Body with fixed footer
<pre><code>&lt;View style={{ flex: 1, backgroundColor: 'gray' }}&gt;

 &lt;View style={{ flex: 9, backgroundColor: 'gray',alignItems: 'center', justifyContent: 'center', }}&gt;
 &lt;Text style={{color:'white'}}&gt;...Header or Body&lt;/Text&gt;
 &lt;/View&gt;


 &lt;View style={{ flex: 1, backgroundColor: 'yellow', alignItems: 'center', justifyContent: 'center', }}&gt;
 &lt;Text&gt;...Footer&lt;/Text&gt;
 &lt;/View&gt;

&lt;/View&gt;
</code></pre>
<a href="https://i.stack.imgur.com/zXtyj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zXtyj.png" alt="Demo Image" /></a>
Edit 2
=&gt; Body &amp; Fixed footer with tabs
<pre><code>&lt;View style={{ flex: 1, backgroundColor: 'gray' }}&gt;

 &lt;View style={{ flex: 9, backgroundColor: 'gray', alignItems: 'center', justifyContent: 'center', }}&gt;
 &lt;Text style={{ color: 'white' }}&gt;...Header or Body&lt;/Text&gt;
 &lt;/View&gt;


 &lt;View style={{ flex: 1, backgroundColor: 'yellow', alignItems: 'center', justifyContent: 'center', }}&gt;
 &lt;View style={{ flex: 1, flexDirection: 'row' }}&gt;
 &lt;TouchableOpacity style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'white' }}&gt;
 &lt;View&gt;
 &lt;Text&gt;
 ...Home
 &lt;/Text&gt;
 &lt;/View&gt;
 &lt;/TouchableOpacity&gt;
 &lt;TouchableOpacity style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'white' }}&gt;
 &lt;View&gt;
 &lt;Text&gt;
 ...Settings
 &lt;/Text&gt;
 &lt;/View&gt;
 &lt;/TouchableOpacity&gt;
 &lt;/View&gt;
 &lt;/View&gt;
&lt;/View&gt;
</code></pre>
<a href="https://i.stack.imgur.com/Ar2GF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ar2GF.png" alt="enter image description here" /></a>
Notes
<pre><code>import {TouchableOpacity} from 'react-native'
</code></pre>
Advantages
We can use this simple footer without react bottom navigation

entityMap|blocks|key|bit0g|text|我创建了一个包。它可能会满足你的需求。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|c3rta|https://github.com/caoyongfeng0214/rn-overlaye|d2dtj|......+
+++++
++++++++Footer|code-block|syntax|javascript^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|J|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|K|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|L|9|@]|A|@]|B|$H|I]]]]

i created a package. it may meet your needs.
<a href="https://github.com/caoyongfeng0214/rn-overlay" rel="nofollow noreferrer">https://github.com/caoyongfeng0214/rn-overlaye</a>
<pre><code>&lt;View style={{paddingBottom:100}}&gt;
 &lt;View&gt; ...... &lt;/View&gt;
 &lt;Overlay style={{left:0, right:0, bottom:0}}&gt;
 &lt;View&gt;&lt;Text&gt;Footer&lt;/Text&gt;&lt;/View&gt;
 &lt;/Overlay&gt;
&lt;/View&gt;
</code></pre>

I try to create react native app that looks like existing web app. I have a fixed footer at bottom of window. Do anyone have idea how this can be achieved with react native?

in existing app it's simple:

<pre class="lang-css prettyprint-override"><code>.footer {
 position: fixed;
 bottom: 0;
}
</code></pre>

React Native fixed footer

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

 我尝试创建react原生应用程序，看起来像现有的web应用程序。我在窗口底部有一个固定的页脚。有没有人知道如何使用react native来实现这一点？ 在现有的应用程序中，这很简单： .footer {  position: fixed;  bottom: 0;}

问React Native固定页脚
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React Native固定页脚EN