首页 文章

React Native固定页脚

提问于
浏览 次
82

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

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

.footer {
  position: fixed;
  bottom: 0;
}
react-native

13 回答

  • 6

    人们可以通过 position: absolute 实现类似的反应

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

    但有几点要记住 .

    • absolute 将元素相对于其父元素定位 .

    • 您可能需要手动设置元素的宽度和高度 .

    • 方向更改时宽度和高度将发生变化 . 这必须手动管理

    实用的样式定义看起来像这样：

    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

    您可能还想查看NativeBase（http://nativebase.io） . 这是React Native的组件库，包括一些不错的布局结构（http://nativebase.io/docs/v2.0.0/components#anatomy），包括页眉和页脚 .

    这有点像Bootstrap for Mobile .

    回复于
  • 4

    这里简单的东西：

    如果您不需要ScrollView这种方法，您可以使用以下代码来实现这样的事情：

    Something like this

    <View style={{flex: 1, backgroundColor:'grey'}}>
    <View style={{flex: 1, backgroundColor: 'red'}} />
    <View style={{height: 100, backgroundColor: 'green'}} />
</View>
    回复于
  • 21

    我在我的应用程序中使用固定页脚按钮 . 我实现固定页脚的方式是这样的：

    <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} . 我希望这有帮助！

    回复于
  • 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>
    回复于
  • 3

    对于Android的问题：

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

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

    我在使用react-native和keyboardAwareScroll的ios中完全没有问题 . 我准备实施大量代码来解决这个问题，直到有人给我这个解决方案 . 工作得很好 .

    回复于
  • 5

    我可以用ScrollView做到这一点 . 您的顶级容器可以是一个Flex容器，其内部有一个ScrollView，底部有一个页脚 . 然后在ScrollView内部正常放置你的应用程序的其余部分 .

    回复于
  • 47

    我这样做的方法是使用flex 1获得一个视图（让我们称之为P），然后在该视图中有另外两个视图（C1和C2），分别具有flex 0.9和0.1（您可以将弹性高度更改为所需的值） . 然后，C1内部有一个scrollview . 这对我来说非常合适 . 以下示例 .

    <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>
    回复于
  • 14

    最好的方法是使用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>
    回复于
  • 3

    @Alexander感谢您的解决方案

    以下是您正在寻找的代码

    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 With Fixed Footer

    回复于
  • 97

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

    <View style={{flex: 1}}>
  <ScrollView>main</ScrollView>
  <View><Text>footer</Text></View>
</View>
    回复于
  • 1

    首先获得Dimension，然后通过flex样式对其进行操作

    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>
    回复于
  • 116

    如果您只是使用react native，那么您可以使用以下代码

    <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本机项目中使用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

    回复于

相关问题