web-dev-qa-db-fra.com

React Pied de page fixe natif

J'essaie de créer une application native qui ressemble à une application Web existante. J'ai un pied de page fixe au bas de la fenêtre. Quelqu'un a-t-il une idée de la façon dont cela peut être réalisé avec react native?

dans une application existante, c'est simple:

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

Vous pouvez le faire avec un ScrollView . Votre conteneur de niveau supérieur peut être un conteneur flexible, avec à l'intérieur un ScrollView en haut et votre pied de page en bas. Ensuite, dans ScrollView, placez le reste de votre application normalement.

129
Colin Ramsay

Voici le code réel basé sur la réponse de Colin à Ramsay:

<View style={{flex: 1}}>
  <ScrollView>main</ScrollView>
  <View><Text>footer</Text></View>
</View>
136
Alexander Zaytsev

J'utilise des pieds de page fixes pour les boutons dans mon application. La façon dont je mets en œuvre un pied de page fixe est comme suit:

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

Et si vous avez besoin que le pied de page se déplace quand un clavier apparaît, vous pouvez par exemple utiliser:

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

Puis utilisez {bottom: this.state.btnLocation} dans votre classe de pied de page fixe. J'espère que ça aide!

54
dahveed707

Vous obtenez d'abord la dimension, puis vous la manipulez avec un style flexible

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

En rendre

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

L'autre méthode consiste à utiliser flex

<View style={{flex: 1}}>
    <View style={{flex: .8}}>main</View>
    <View style={{flex: .2}}>footer</View>
</View>
21
syarul

@ Alexander Merci pour la solution

Le code ci-dessous correspond exactement à ce que vous recherchez 

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

Ci-dessous la capture d'écran

ScrollView With Fixed Footer

16
Ashok R

Vous voudrez peut-être aussi jeter un coup d’œil à NativeBase ( http://nativebase.io ). C'est une bibliothèque de composants pour React Native comprenant une structure de mise en page de Nice ( http://nativebase.io/docs/v2.0.0/components#anatomy ), y compris les en-têtes et les pieds de page. .

C'est un peu comme Bootstrap pour Mobile.

7
Simon Ordish

Des trucs simples ici:

Si vous n'avez pas besoin d'un ScrollView pour cette approche, vous pouvez utiliser le code ci-dessous pour obtenir quelque chose comme ceci:

Something like this

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

J'ai trouvé que flex était la solution la plus simple.

<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>
5
Saif Ahmed

Ci-dessous, le code pour définir le pied de page et les éléments ci-dessus.

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,
  },
});
5
shruti garg

Pour ce faire, j'ai eu une vue (appelons-la P) avec flex 1, puis deux vues supplémentaires (C1 et C2) avec flex 0.9 et 0.1 respectivement (vous pouvez modifier les hauteurs de flex en valeurs requises). . Ensuite, à l'intérieur de la C1 ont un scrollview. Cela a parfaitement fonctionné pour moi. Exemple ci-dessous.

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

On pourrait réaliser quelque chose de similaire en réagissant nativement avec position: absolute

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

Cependant, il y a quelques points à garder à l'esprit.

  1. absolute positionne l'élément par rapport à son parent.
  2. Vous devrez peut-être définir manuellement la largeur et la hauteur de l'élément.
  3. La largeur et la hauteur changeront lorsque l'orientation changera. Cela doit être géré manuellement

Une définition de style pratique ressemblerait à ceci:

import { Dimensions } from 'react-native';

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

let footerStyle = {
  position: 'absolute',
  bottom: 0,
  width: screenWidth,
  height: 60
}
5
Akash Kurian Jose

Le meilleur moyen est d'utiliser la propriété JustContent.

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

si vous avez plusieurs éléments de vue à l'écran, vous pouvez utiliser

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

Lorsque flex est un nombre positif, le composant est flexible et sa taille est proportionnelle à sa valeur de flex. Ainsi, un composant avec flex défini sur 2 occupera deux fois plus d'espace qu'un composant avec flex défini sur 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>
2
iambinodstha

Pour Android problèmes avec ceci:

dans app/src/AndroidManifest.xml, changez la fenêtreSoftInputMode comme suit.

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

Je n'ai eu absolument aucun problème avec iOS avec react-native et keyboardAwareScroll. J'étais sur le point d'implémenter une tonne de code pour résoudre ce problème jusqu'à ce que quelqu'un me donne cette solution. A parfaitement fonctionné.

2
Lisa Faye Cook

Définissez Android: windowSoftInputMode = "adjustPan" dans votre fichier manifeste et il fonctionnera comme prévu.

1
Andresh Singh

Je pense que le mieux et le plus simple serait comme ci-dessous, il suffit de placer le reste de la vue dans un contenu et le pied de page dans une vue séparée.

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

ou vous pouvez utiliser le pied de page de base native

`<Container>
  <Content>
    <View>
Ur contents
    </View>
  </Content>
<Footer>
Footer
</Footer>
</Container>`
1
Aishwarya Shetty

si vous utilisez juste réagir natif afin que vous puissiez utiliser le code suivant

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

vous pouvez également utiliser https://docs.nativebase.io/ dans votre projet natif de réaction, puis procédez comme suit:

<Container>

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

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

</Content>

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

</Container>

React_Native

NativeBase.io

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

puis sur les styles d'écrire

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

travaillé comme un charme

0
Joseph Owigo