Reagir rodapé fixo nativo

128

Tento criar um aplicativo nativo de reação que se parece com o aplicativo da web existente. Eu tenho um rodapé fixo na parte inferior da janela. Alguém tem idéia de como isso pode ser alcançado com o reagir nativo?

no aplicativo existente, é simples:

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

Respostas:

166

Em cima da minha cabeça, você poderia fazer isso com um ScrollView . Seu contêiner de nível superior pode ser um contêiner flexível, com um ScrollView na parte superior e o rodapé na parte inferior. Depois, no ScrollView, basta colocar o resto do seu aplicativo normalmente.

Colin Ramsay
fonte
funciona muito bem =) thx, adicionado heightao rodapé View e fica bem em 4s e 6
4ega
1
Isso funciona. Mas eu não conseguia entender o porquê. Por que isso funciona?
Aditi
171

Aqui está o código real com base na resposta de Colin Ramsay:

<View style={{flex: 1}}>
  <ScrollView>main</ScrollView>
  <View><Text>footer</Text></View>
</View>
Alexander Zaytsev
fonte
1
Sim, eu tentei, mas sem o flex não funcionou: D Obrigado por pressionar para tentar novamente :) E se você clicou na entrada, quero mencionar o uso de onContentSizeChange. Então, o que eu fiz eu rolada scrollview superior assim: onContentSizeChange = {(largura, altura) => this.refs.scrollView.scrollTo ({y: this.state.onInputSelectScrollViewPaddingSize})}
Ernestyno
1
isso não funciona. eu não posso ver por que ele iria trabalhar em qualquer caso
Paulo Roberto Rosa
63

Estou usando rodapés fixos para botões no meu aplicativo. A maneira como eu implemento um rodapé fixo é assim:

<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 precisar que o rodapé suba quando um teclado aparecer, por exemplo, você pode usar:

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

Em seguida, use {bottom: this.state.btnLocation} na sua classe de rodapé fixo. Eu espero que isso ajude!

dahveed707
fonte
2
Alguém ficando 'indefinido não é um objeto (avaliando "DeviceEventEmitter.addListener")' ao tentar fazer 'this.setState (...)' nos ouvintes do teclado?
John Sardinha
@JohnSardinha Tente em import { Keyboard} from 'react-native'; Keyboard.addListener('keyboardWillShow', this.showHandler)vez disso.
maxhungry
23

Você obtém a dimensão primeiro e depois a manipula através do estilo flexível

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

Em renderização

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

O outro método é usar o flex

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

@Alexander Obrigado pela solução

Abaixo está o código exatamente o que você está procurando

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

Abaixo está a captura de tela

ScrollView com rodapé fixo

Ashok R
fonte
Exemplo bom :)
joey rohan
7

Você também pode dar uma olhada no NativeBase ( http://nativebase.io ). Essa é uma biblioteca de componentes para o React Native que inclui uma boa estrutura de layout ( http://nativebase.io/docs/v2.0.0/components#anatomy ), incluindo cabeçalhos e rodapés.

É um pouco como o Bootstrap for Mobile.

Simon Ordish
fonte
1
Não inclui layout para o rodapé fixo.
svlada
7

Coisas simples aqui:

Caso você não precise de um ScrollView para essa abordagem, pode seguir o código abaixo para obter algo parecido com isto:

Algo assim

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

Abaixo está o código para definir o rodapé e os elementos acima.

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

A maneira como fiz isso foi ter uma visualização (vamos chamá-la de P) com o flex 1, e, dentro dessa visualização, ter mais 2 visualizações (C1 e C2) com flex 0,9 e 0,1, respectivamente (você pode alterar as alturas do flex para os valores necessários) . Então, dentro do C1, tenha uma visualização de rolagem. Isso funcionou perfeitamente para mim. Exemplo abaixo.

<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
Além disso, os estilos esquerdo, direito e inferior do valor 0 devem ser fornecidos para que funcione.
IVI
5

Pode-se alcançar algo semelhante ao reagir nativamente com position: absolute

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

Existem algumas coisas a ter em mente.

  1. absolute posiciona o elemento em relação ao seu pai.
  2. Pode ser necessário definir a largura e a altura do elemento manualmente.
  3. A largura e a altura serão alteradas quando a orientação mudar. Isso deve ser gerenciado manualmente

Uma definição de estilo prático seria algo como isto:

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

Eu achei o uso do flex a solução mais simples.

<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 é um número positivo, torna o componente flexível e será dimensionado proporcionalmente ao seu valor flex. Portanto, um componente com flex definido como 2 ocupará o dobro do espaço que um componente com flex definido como 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>
Expandir snippet

iambinodstha
fonte
1
Por favor, considere adicionar algumas explicações à sua resposta.
HMD
3

A melhor maneira é usar a propriedade justifyContent

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

se você tiver vários elementos de exibição na tela, poderá usar 

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

então escreva esse estilo

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

funcionou como um encanto

Joseph Owigo
fonte
2

Para problemas do Android com isso:

em app / src / AndroidManifest.xml, altere windowSoftInputMode para o seguinte. 

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

Não tive absolutamente nenhum problema com isso no ios usando react-native e keyboardAwareScroll. Eu estava prestes a implementar uma tonelada de código para descobrir isso até que alguém me desse essa solução. Funcionou perfeitamente.

Lisa Faye Cook
fonte
2

se você usar reagir nativo para usar o código a seguir

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

Além disso, você pode usar https://docs.nativebase.io/ no seu projeto nativo do react e depois fazer algo como o seguinte

<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

Defina android: windowSoftInputMode = "AdjustPan" no seu arquivo de manifesto e funcionará conforme o esperado.

Andresh Singh
fonte
1

Acho que o melhor e mais fácil seria o seguinte, basta colocar o restante da visualização em um conteúdo e rodapé em uma visualização separada.

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

ou você pode usar rodapé da base nativa

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

Sugestão 1

=> Corpo com rodapé fixo

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

Imagem de demonstração

Editar 2

=> Corpo e rodapé fixo com abas

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

insira a descrição da imagem aqui

Notas

import {TouchableOpacity} in 'react-native'

Vantagens

Podemos usar este rodapé simples sem reagir à navegação inferior

DevAelius
fonte