React pied de page fixe natif

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>

J'utilise des pieds de page fixes pour les boutons de mon application. La façon dont j'implémente un pied de page fixe est la suivante:

<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 du pied de page pour monter quand un clavier apparaît par exemple, vous pouvez 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 {bas: c'.état.btnLocation} dans votre classe de pied de page fixe. J'espère que cela aide!

Vous obtenez d'abord la Dimension, puis la manipulez à travers le style flex

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

Dans le rendu

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

@Alexandre Merci pour la solution

voici le code à 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 est la capture d'écran

Vous pouvez également jeter un oeil à NativeBase ( http://nativebase.io ). Ceci est une bibliothèque de composants pour React Native qui incluent une belle structure de mise en page ( 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.

Des trucs simples ici:

Au cas où vous n'auriez pas besoin D'un ScrollView pour cette approche, vous pouvez utiliser le code ci-dessous pour réaliser quelque chose comme ceci:

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

On pourrait réaliser quelque chose de similaire dans react native avec position: absolute

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

, Il ya quelques choses à 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 changent lorsque l'orientation change. 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
}

La façon dont je l'ai fait était d'avoir une vue (appelons-la P) Avec flex 1, puis à l'intérieur de cette vue ont 2 autres vues (C1 et C2) avec flex 0.9 et 0.1 respectivement (vous pouvez changer les hauteurs de flex aux valeurs requises). Ensuite, à L'intérieur du C1 ont un scrollview. Cela a fonctionné parfaitement pour moi. L'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>

Le meilleur moyen est d'utiliser la propriété justifyContent

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

J'ai trouvé que l'utilisation de 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>