React Native固定页脚

作者: 一号位
发布时间: 2024-07-03 12:39:35 (26天前)
转自：

16 条回复

0#
回复此人
天线宝宝 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我这样做的方法是使用flex 1获得一个视图（让我们称之为P），然后在该视图中有另外两个视图（C1和C2），分别使用flex 0.9和0.1（您可以将弹性高度更改为所需的值）。然后，在C1内部有一个scrollview。这对我很有用。以下示例。 </p> <pre> <code> <View style={{flex: 1}}> <View style={{flex: 0.9}}> <ScrollView> <Text style={{marginBottom: 500}}>scrollable section</Text> </ScrollView> </View> <View style={{flex: 0.1}}> <Text>fixed footer</Text> </View> </View> </code> </pre> </DIV>

编辑
1#
回复此人
遇见你 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 在清单文件中设置android：windowSoftInputMode =“adjustPan”，它将按预期工作。 </p> </DIV>

编辑
2#
回复此人
SHOU宅大可爱 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 下面是设置页脚和元素的代码.hope有帮助。 </p> <pre> <code> import React, { Component } from 'react'; import { StyleSheet, View, Text, ScrollView } from 'react-native'; export default class App extends render() { return ( <View style={styles.containerMain}> <ScrollView> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> <Text> Main Content Here</Text> </ScrollView> <View style={styles.bottomView}> <Text style={styles.textStyle}>Bottom View</Text> </View> </View> ); } } 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> </DIV>

编辑
3#
回复此人
求赞有赞必回 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 最好的方法是使用justifyContent属性 </p> <pre> <code> <View style={{flexDirection:'column',justifyContent:'flex-end'}}> <View> <Text>fixed footer</Text> </View> </View> </code> </pre> <P> 如果您在屏幕上有多个视图元素，那么您可以使用 </p> <pre> <code> <View style={{flexDirection:'column',justifyContent:'space-between'}}> <View> <Text>view 1</Text> </View> <View> <Text>view 2</Text> </View> <View> <Text>fixed footer</Text> </View> </View> </code> </pre> </DIV>

编辑
4#
回复此人
疯子哥哥 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 对于Android的问题： </p> <P> 在app / src / AndroidManifest.xml中将windowSoftInputMode更改为以下内容。 </p> <pre> <code> <activity android:windowSoftInputMode="stateAlwaysHidden|adjustPan"> </code> </pre> <P> 我在使用react-native和keyboardAwareScroll的ios中完全没有问题。我准备实施大量代码来解决这个问题，直到有人给我这个解决方案。工作得很完美。 </p> </DIV>

编辑
5#
回复此人
浮华丶 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这是基于Colin的Ramsay答案的实际代码： </p> <pre class="lang-html prettyprint-override"> <code> <View style={{flex: 1}}> <ScrollView>main</ScrollView> <View><Text>footer</Text></View> </View> </code> </pre> </DIV>

编辑
6#
回复此人
银环蛇 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我在我的应用程序中使用固定页脚按钮。我实现固定页脚的方式是这样的： </p> <pre> <code> <View style={{flex: 1}}> <View><Text>my text</Text></View> <View style={{position: 'absolute', left: 0, right: 0, bottom: 0}}><Text>My fixed footer</Text></View> </View> </code> </pre> <P> 如果在键盘出现时需要向上移动页脚，您可以使用： </p> <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> <P> 然后在固定的页脚类中使用{bottom：this.state.btnLocation}。我希望这有帮助！ </p> </DIV>

编辑
7#
回复此人
=_= | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 当flex是正数时，它使组件具有灵活性，并且其大小将与其弹性值成比例。因此，将flex设置为2的组件将弹性设置为1的组件占用两倍的空间。 </p> <P> </p> <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> <View style={{flex: 1}> <ScrollView> //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. </ScrollView> <View style={styles.footerContainer}> //your fixed footer content will sit fixed below your screen </View> </View> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑
8#
回复此人
浮华丶 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我发现使用flex是最简单的解决方案。 </p> <pre> <code> <View style={{flex:1, justifyContent: 'space-around', alignItems: 'center', flexDirection: 'row',}}> <View style={{flex:8}}> //Main Activity </View> <View style={{flex:1}}> //Footer </View> </View> </code> </pre> </DIV>

编辑
9#
回复此人
啦啦啦拉肚子 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果您只是使用react native，那么您可以使用以下代码 </p> <pre> <code> <View style={{flex:1}}> {/* Your Main Content*/} <View style={{flex:3}}> <ScrollView> {/* Your List View ,etc */} </ScrollView> </View> {/* Your Footer */} <View style={{flex:1}}> {/*Elements*/} </View> </View> </code> </pre> <P> 另外，你可以使用 <a href="https://docs.nativebase.io/" rel="nofollow noreferrer"> https://docs.nativebase.io/ </A> 在您的反应本机项目中，然后执行以下操作 </p> <pre> <code> <Container> {/*Your Main Content*/} <Content> <ScrollView> {/* Your List View ,etc */} </ScrollView> </Content> {/*Your Footer*/} <Footer> {/*Elements*/} </Footer> </Container> </code> </pre> <H1> React_Native </H1> <H1> NativeBase.io </H1> </DIV>

编辑
10#
回复此人
阿政ღ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您可能还想看看NativeBase（ <a href="http://nativebase.io" rel="noreferrer"> http://nativebase.io </A> ）。这是React Native的一个组件库，包含一些不错的布局结构（ <a href="http://nativebase.io/docs/v2.0.0/components#anatomy" rel="noreferrer"> http://nativebase.io/docs/v2.0.0/components#anatomy </A> ）包括页眉和页脚。 </p> <P> 这有点像Bootstrap for Mobile。 </p> </DIV>

编辑
11#
回复此人
℘ 宋唐 ℒº ѵ ℯ楚厦 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 首先获得Dimension，然后通过flex样式对其进行操作 </p> <pre> <code> var Dimensions = require('Dimensions') var {width, height} = Dimensions.get('window') </code> </pre> <P> 在渲染中 </p> <pre> <code> <View style={{flex: 1}}> <View style={{width: width, height: height - 200}}>main</View> <View style={{width: width, height: 200}}>footer</View> </View> </code> </pre> <P> 另一种方法是使用flex </p> <pre> <code> <View style={{flex: 1}}> <View style={{flex: .8}}>main</View> <View style={{flex: .2}}>footer</View> </View> </code> </pre> </DIV>

编辑
12#
回复此人
ikun | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 在我的头顶，你可以做到这一点 <a href="https://facebook.github.io/react-native/docs/scrollview.html" rel="noreferrer"> 滚动型 </A> 。您的顶级容器可以是一个Flex容器，其内部有一个ScrollView，底部有一个页脚。然后在ScrollView内部正常放置你的应用程序的其余部分。 </p> </DIV>

编辑
13#
回复此人
枫 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这里简单的东西： </p> <BLOCKQUOTE> <P> 如果您不需要ScrollView这种方法，您可以使用下面的代码来实现这样的事情： </p> </BLOCKQUOTE> <P> <a href="https://i.stack.imgur.com/dNEaV.png" rel="nofollow noreferrer"> <img src =“https://i.stack.imgur.com/dNEaV.png”alt =“这样的东西”/> </A> </p> <pre> <code> <View style={{flex: 1, backgroundColor:'grey'}}> <View style={{flex: 1, backgroundColor: 'red'}} /> <View style={{height: 100, backgroundColor: 'green'}} /> </View> </code> </pre> </DIV>

编辑
14#
回复此人
浮华丶 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我认为最好也很容易，如下图所示，只需将内容和页脚的其余部分放在单独的视图中即可。 </p> <pre> <code> `<Container> <Content> <View> Ur contents </View> </Content> <View> Footer </View> </Container>` </code> </pre> <P> 或者你可以使用本地基础的页脚 </p> <pre> <code> `<Container> <Content> <View> Ur contents </View> </Content> <Footer> Footer </Footer> </Container>` </code> </pre> </DIV>

编辑

登录后才能参与评论