反应本地固定页脚

128

我尝试创建看起来像现有Web应用程序的React本机应用程序。我在窗口底部有一个固定的页脚。有谁知道如何通过本机反应实现这一目标？

在现有的应用程序中很简单：

.footer {
  position: fixed;
  bottom: 0;
}
react-native 
— 4ega
source

Answers:

166

你可以用ScrollView做到这一点。您的顶级容器可以是flex容器，在内部它的顶部是ScrollView，底部是页脚。然后在ScrollView内部，将其余的应用程序正常放置。

— 科林·拉姆齐
source
效果很好=）thx，刚刚添加height到页脚视图中，它看起来不错，在4s和6
— 4ega 2015年
1
这可行。但是我不明白为什么。为什么这样做？
— 阿迪蒂
171

这是基于Colin的Ramsay答案的实际代码：

<View style={{flex: 1}}>
  <ScrollView>main</ScrollView>
  <View><Text>footer</Text></View>
</View>
— 亚历山大·扎采夫（Alexander Zaytsev）
source
1
是的，我尝试了它，但是没有flex没有起作用：D感谢您再次尝试尝试:)如果您单击输入，我想提及使用onContentSizeChange。因此，我所做的就是像这样滚动scrollview的上部：onContentSizeChange = {（（width，height）=> this.refs.scrollView.scrollTo（{y：this.state.onInputSelectScrollViewPaddingSize}）}
— Ernestyno，
1
它不起作用。我看不到为什么无论如何都会奏效
— Paulo Roberto Rosa
63

我在应用程序中使用固定的页脚作为按钮。我实现固定页脚的方式如下：

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

如果例如在键盘出现时需要页脚向上移动，则可以使用：

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

然后在固定的页脚类中使用{bottom：this.state.btnLocation}。我希望这有帮助！

— dahveed707
source
2
尝试在键盘侦听器上执行“ this.setState（...）”时，得到“未定义的人”不是对象（评估“ DeviceEventEmitter.addListener”）吗？
— 约翰·萨丁尼亚
@JohnSardinha试试看import { Keyboard} from 'react-native'; Keyboard.addListener('keyboardWillShow', this.showHandler)。
— maxhungry
23

首先获取尺寸，然后通过伸缩样式对其进行操作

var Dimensions = require('Dimensions')
var {width, height} = Dimensions.get('window')

在渲染中

<View style={{flex: 1}}>
    <View style={{width: width, height: height - 200}}>main</View>
    <View style={{width: width, height: 200}}>footer</View>
</View>

另一种方法是使用flex

<View style={{flex: 1}}>
    <View style={{flex: .8}}>main</View>
    <View style={{flex: .2}}>footer</View>
</View>
— 亚鲁
source
17

@亚历山大谢谢您的解决方案

下面的代码正是您想要的

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(
      <View style={styles.mainviewStyle}>
        <ContainerView/>
          <View style={styles.footer}>
          <TouchableHighlight style={styles.bottomButtons}>
              <Text style={styles.footerText}>A</Text>
          </TouchableHighlight>
          <TouchableHighlight style={styles.bottomButtons}>
              <Text style={styles.footerText}>B</Text>
          </TouchableHighlight>
          </View>
      </View>
    );
  }
}

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

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

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

下面是截图

具有固定页脚的ScrollView

— 阿肖克河
source
很好的例子:)
— joey rohan
7

简单的东西在这里：

如果不需要这种方法的ScrollView，则可以使用以下代码来实现以下目的：

像这样

<View style={{flex: 1, backgroundColor:'grey'}}>
    <View style={{flex: 1, backgroundColor: 'red'}} />
    <View style={{height: 100, backgroundColor: 'green'}} />
</View>
— Cherag Verma
source
7

下面是在上面设置页脚和元素的代码。

import React, { Component } from 'react';
import { StyleSheet, View, Text, ScrollView } from 'react-native';
export default class App extends Component {
    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,
  },
});
— 什鲁蒂·加尔格
source
6

我这样做的方法是使用flex 1创建一个视图（称为P），然后在该视图内部分别使用弹性0.9和0.1的两个视图（C1和C2）（可以将flex heights更改为所需的值） 。然后，在C1内部有一个滚动视图。这对我来说非常有效。下面的例子。

<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>
— 拉杰什
source
最重要的是，必须提供值为0的左侧，右侧和底部样式，以使其起作用。
— IVI's
5

人们可以通过与 position: absolute

let footerStyle = {
  position: 'absolute',
  bottom: 0,
}

不过，有几件事要牢记。

  1. absolute 相对于其父元素定位元素。
  2. 您可能必须手动设置元素的宽度和高度。
  3. 方向改变时，宽度和高度将改变。必须手动管理

实用的样式定义如下所示：

import { Dimensions } from 'react-native';

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

let footerStyle = {
  position: 'absolute',
  bottom: 0,
  width: screenWidth,
  height: 60
}
— 阿卡什·库里安·何塞（Akash Kurian Jose）
source
5

我发现使用flex是最简单的解决方案。

<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>
— 首先
source
4

当flex为正数时，它将使组件具有柔韧性，并且其大小将与其flex值成比例。因此，将flex设置为2的组件所占空间是将flex设置为1的组件所占空间的两倍。

   <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>
展开摘要

— Iambinodstha
source
1
请考虑在回答中添加一些解释。
— HMD
3

最好的方法是使用justifyContent属性

<View style={{flexDirection:'column',justifyContent:'flex-end'}}>
     <View>
        <Text>fixed footer</Text>
    </View>
</View>

如果屏幕上有多个视图元素，则可以使用 

<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>
— 曼佐·萨玛德（Manzoor Samad）
source
3 
import {Dimensions} from 'react-native'

const WIDTH = Dimensions.get('window').width;
const HEIGHT = Dimensions.get('window').height;

然后就写这个样式

 position: 'absolute',
 top: HEIGHT-80,
 left: 0,
 right: 0,

像魅力一样运作

— 约瑟夫·奥维戈
source
2

对于Android与此相关的问题：

在app / src / AndroidManifest.xml中，将windowSoftInputMode更改为以下内容。 

<activity
   android:windowSoftInputMode="stateAlwaysHidden|adjustPan">

我在使用react-native和keyboardAwareScroll的ios中对此绝对没有问题。在有人给我这个解决方案之前，我将实现大量的代码来解决这个问题。工作完美。

— 丽莎·菲·库克（Lisa Faye Cook）
source
2

如果您仅使用本机反应，则可以使用以下代码

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

另外，您可以在React Native项目中使用https://docs.nativebase.io/，然后执行以下操作

<Container>

{/*Your Main Content*/}
<Content>

<ScrollView>
   {/* Your List View ,etc */}
</ScrollView>

</Content>

{/*Your Footer*/}
<Footer>
   {/*Elements*/}
</Footer>

</Container>

React_Native

NativeBase.io

— ab_did96
source
1

我认为最好和最简单的方法如下，将其余视图放在内容中，将页脚放在单独的视图中。

`<Container>
   <Content>
     <View>
      Ur contents
    </View>
  </Content>
  <View>
  Footer
  </View>
</Container>`

或者您可以使用本机库中的页脚

`<Container>
  <Content>
    <View>
Ur contents
    </View>
  </Content>
<Footer>
Footer
</Footer>
</Container>`
— 艾西瓦娅·谢蒂（Aishwarya Shetty）
source
1

建议1

=>具有固定页脚的主体

<View style={{ flex: 1, backgroundColor: 'gray' }}>

        <View style={{ flex: 9, backgroundColor: 'gray',alignItems: 'center', justifyContent: 'center',  }}>
          <Text style={{color:'white'}}>...Header or Body</Text>
        </View>


        <View style={{ flex: 1, backgroundColor: 'yellow', alignItems: 'center', justifyContent: 'center', }}>
          <Text>...Footer</Text>
        </View>

</View>

演示图片

编辑2

=>带有选项卡的正文和固定页脚

<View style={{ flex: 1, backgroundColor: 'gray' }}>

        <View style={{ flex: 9, backgroundColor: 'gray', alignItems: 'center', justifyContent: 'center', }}>
          <Text style={{ color: 'white' }}>...Header or Body</Text>
        </View>


        <View style={{ flex: 1, backgroundColor: 'yellow', alignItems: 'center', justifyContent: 'center', }}>
          <View style={{ flex: 1, flexDirection: 'row' }}>
            <TouchableOpacity style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'white' }}>
              <View>
                <Text>
                  ...Home
              </Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'white' }}>
              <View>
                <Text>
                  ...Settings
              </Text>
              </View>
            </TouchableOpacity>
          </View>
        </View>
</View>

在此处输入图片说明

笔记

import {TouchableOpacity} in 'react-native'

优点

我们可以使用此简单的页脚，而无需做出底部导航

— DevAelius
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.