Piè di pagina fisso nativo React

128

Provo a creare un'app nativa reattiva che assomigli all'app Web esistente. Ho un piè di pagina fisso nella parte inferiore della finestra. Qualcuno ha idea di come questo può essere ottenuto con reagire nativo?

nell'app esistente è semplice:

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

Risposte:

167

Dalla parte superiore della mia testa potresti farlo con ScrollView . Il tuo contenitore di livello superiore potrebbe essere un contenitore flessibile, all'interno che ha uno ScrollView nella parte superiore e il piè di pagina nella parte inferiore. Quindi, all'interno di ScrollView, inserisci il resto della tua app normalmente.

— Colin Ramsay
fonte
funziona benissimo =) grazie, appena aggiunto heightalla vista a piè di pagina ed è bello su 4s e 6
— 4ega
1
Questo funziona Ma non riuscivo a capire il perché. Perché funziona?
— Aditi,
171

Ecco il codice effettivo basato sulla risposta di Colin's Ramsay:

<View style={{flex: 1}}>
  <ScrollView>main</ScrollView>
  <View><Text>footer</Text></View>
</View>
— Alexander Zaytsev
fonte
1
Sì, l'ho provato ma senza flex non ha funzionato: D Grazie per la spinta per riprovare :) E se hai cliccato sull'input voglio menzionare di usare onContentSizeChange. Quindi quello che ho fatto ho fatto scorrere la vista superiore in questo modo: onContentSizeChange = {(larghezza, altezza) => this.refs.scrollView.scrollTo ({y: this.state.onInputSelectScrollViewPaddingSize})}
— Ernestyno
1
non funziona. non riesco a capire perché funzionerebbe in ogni caso
— Paulo Roberto Rosa,
63

Sto usando piè di pagina fissi per i pulsanti nella mia app. Il modo in cui implemento un piè di pagina fisso è così:

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

E se è necessario il piè di pagina per spostarsi verso l'alto quando appare una tastiera, ad esempio, è possibile utilizzare:

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

Quindi usa {bottom: this.state.btnLocation} nella tua classe di piè di pagina fissa. Spero che aiuti!

— dahveed707
fonte
2
Chiunque ottenga 'undefined non è un oggetto (valutando "DeviceEventEmitter.addListener")' quando tenta di eseguire 'this.setState (...)' sui listener della tastiera?
— John Sardinha,
@JohnSardinha Prova import { Keyboard} from 'react-native'; Keyboard.addListener('keyboardWillShow', this.showHandler)invece.
— Maxhungry,
23

Prendi prima la Dimensione e poi la manipoli attraverso lo stile flessibile

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

Nel rendering

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

L'altro metodo è usare la flessibilità

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

@Alexander Grazie per la soluzione

Di seguito è riportato il codice esattamente quello che stai cercando

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

Di seguito è la schermata

ScrollView con piè di pagina fisso

— Ashok R
fonte
Bell'esempio :)
— joey rohan,
7

Roba semplice qui:

Nel caso in cui non sia necessario uno ScrollView per questo approccio, è possibile utilizzare il codice seguente per ottenere qualcosa del genere:

Qualcosa come questo

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

Di seguito è riportato il codice per impostare il piè di pagina e gli elementi sopra.

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,
  },
});
— Shruti Garg
fonte
6

Il modo in cui l'ho fatto è stato quello di avere una vista (chiamiamola P) con flex 1, quindi all'interno di quella vista ci sono altre 2 viste (C1 e C2) con flex 0.9 e 0.1 rispettivamente (è possibile modificare le altezze di flex ai valori richiesti) . Quindi, all'interno del C1 hanno una vista di scorrimento. Ha funzionato perfettamente per me. Esempio sotto.

<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>
— Rajesh
fonte
Aggiungendo in cima a questo, gli stili sinistro, destro e inferiore del valore 0 devono essere forniti affinché funzioni.
— IVI
5

Si potrebbe ottenere qualcosa di simile nel reagire nativo con position: absolute

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

Tuttavia, ci sono alcune cose da tenere a mente.

  1. absolute posiziona l'elemento rispetto al suo genitore.
  2. Potrebbe essere necessario impostare manualmente la larghezza e l'altezza dell'elemento.
  3. Larghezza e altezza cambieranno quando cambia l'orientamento. Questo deve essere gestito manualmente

Una definizione di stile pratico sarebbe simile a questa:

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

Ho scoperto che usare Flex è la soluzione più semplice.

<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>
— saiftyfirst
fonte
4

Quando flex è un numero positivo, rende flessibile il componente e sarà dimensionato in modo proporzionale al suo valore di flex. Quindi un componente con flex impostato su 2 occuperà il doppio dello spazio come componente con flex impostato su 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>
Espandi frammento

— iambinodstha
fonte
1
Ti preghiamo di considerare di aggiungere qualche spiegazione alla tua risposta.
— HMD il
3

Il modo migliore è utilizzare la proprietà justifyContent

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

se hai più elementi di visualizzazione sullo schermo, puoi usarli 

<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
fonte
3 
import {Dimensions} from 'react-native'

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

quindi sulla scrittura questo stili

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

ha funzionato come un fascino

— Joseph Owigo
fonte
2

Per problemi Android con questo:

in app / src / AndroidManifest.xml cambia windowSoftInputMode nel modo seguente. 

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

Non ho avuto assolutamente alcun problema con questo in iOS usando Reat-native e KeyboardAwareScroll. Stavo per implementare un sacco di codice per capirlo fino a quando qualcuno non mi ha dato questa soluzione. Ha funzionato perfettamente.

— Lisa Faye Cook
fonte
2

se usi solo reagire nativo in modo da poter usare il seguente codice

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

inoltre, puoi utilizzare https://docs.nativebase.io/ nel tuo progetto nativo di reazione e quindi fare qualcosa di simile al seguente

<Container>

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

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

</Content>

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

</Container>

React_Native

NativeBase.io

— ab_did96
fonte
2

Imposta android: windowSoftInputMode = "adjustPan" nel tuo file manifest e funzionerà come previsto.

— Andresh Singh
fonte
1

Penso che la cosa migliore e facile sarebbe come sotto, basta posizionare il resto della tua vista in un contenuto e il piè di pagina in una vista separata.

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

oppure puoi usare il piè di pagina dalla base nativa

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

Suggerimento 1

=> Corpo con piè di pagina fisso

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

Immagine dimostrativa

Modifica 2

=> Corpo e piè di pagina fisso con schede

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

inserisci qui la descrizione dell'immagine

Appunti

import {TouchableOpacity} in 'react-native'

vantaggi

Possiamo usare questo semplice piè di pagina senza reagire alla navigazione in basso

— DevAelius
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.