Bereaksi footer asli asli

128

Saya mencoba membuat aplikasi asli reaksi yang terlihat seperti aplikasi web yang ada. Saya memiliki catatan kaki tetap di bagian bawah jendela. Adakah yang tahu bagaimana hal ini dapat dicapai dengan reaksi asli?

dalam aplikasi yang sudah ada itu sederhana:

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

Jawaban:

167

Dari atas kepala saya, Anda bisa melakukan ini dengan ScrollView . Wadah tingkat atas Anda bisa berupa wadah fleksibel, di dalamnya ada ScrollView di bagian atas dan catatan kaki Anda di bagian bawah. Kemudian di dalam ScrollView cukup masukkan sisa aplikasi Anda seperti biasa.

Colin Ramsay
sumber
berfungsi dengan baik =) thx, baru saja ditambahkan heightke footer View dan terlihat bagus pada 4s dan 6
4ega
1
Ini bekerja. Tetapi saya tidak mengerti mengapa. Mengapa ini bekerja?
Aditi
171

Berikut kode aktual berdasarkan jawaban Ramsay Colin:

<View style={{flex: 1}}>
  <ScrollView>main</ScrollView>
  <View><Text>footer</Text></View>
</View>
Alexander Zaytsev
sumber
1
Ya saya mencobanya tetapi tanpa flex tidak berhasil: D Terima kasih atas dorongan untuk mencobanya lagi :) Dan jika Anda mengklik input saya ingin menyebutkan untuk menggunakan onContentSizeChange. Jadi apa yang saya lakukan, saya menggulir scrollview atas seperti ini: onContentSizeChange = {(lebar, tinggi) => this.refs.scrollView.scrollTo ({y: this.state.onInputSelectScrollViewPaddingSize})}
Ernestyno
1
itu tidak berfungsi. saya tidak mengerti mengapa ini bisa berhasil
Paulo Roberto Rosa
63

Saya menggunakan footer tetap untuk tombol di aplikasi saya. Cara saya menerapkan footer tetap adalah seperti ini:

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

Dan jika perlu footer untuk bergerak ke atas ketika keyboard muncul misalnya Anda dapat menggunakan:

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

Kemudian gunakan {bottom: this.state.btnLocation} di kelas footer tetap Anda. Saya harap ini membantu!

dahveed707
sumber
2
Adakah yang mendapatkan 'undefined bukan objek (mengevaluasi "DeviceEventEmitter.addListener")' ketika mencoba melakukan 'this.setState (...)' pada pendengar keyboard?
John Sardinha
@ JohnSardinha Coba import { Keyboard} from 'react-native'; Keyboard.addListener('keyboardWillShow', this.showHandler)sebagai gantinya.
maxhungry
23

Anda mendapatkan Dimensi pertama dan kemudian memanipulasi melalui gaya fleksibel

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

Dalam render

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

Metode lainnya adalah dengan menggunakan flex

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

@Alexander Terima kasih atas solusinya

Di bawah ini adalah kode persis apa yang Anda cari

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 bawah ini adalah Screenshot

ScrollView Dengan Footer Tetap

Ashok R
sumber
Contoh yang bagus :)
joey rohan
7

Anda mungkin juga ingin melihat NativeBase ( http://nativebase.io ). Ini adalah pustaka komponen untuk React Native yang menyertakan beberapa struktur tata letak yang bagus ( http://nativebase.io/docs/v2.0.0/components#anatomy ) termasuk Header dan Footer.

Ini agak mirip Bootstrap untuk Seluler.

Simon Ordish
sumber
1
Itu tidak termasuk tata letak untuk catatan kaki tetap.
svlada
7

Hal-hal sederhana di sini:

Jika Anda tidak memerlukan ScrollView untuk pendekatan ini, Anda bisa menggunakan kode di bawah ini untuk mencapai Sesuatu seperti ini:

Sesuatu seperti ini

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

Di bawah ini adalah kode untuk mengatur footer dan elemen di atas.

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

Cara saya melakukan ini adalah memiliki tampilan (sebut saja P) dengan flex 1, lalu di dalam view tersebut memiliki 2 lebih banyak view (C1 dan C2) dengan flex 0,9 dan 0,1 masing-masing (Anda dapat mengubah ketinggian flex ke nilai yang diperlukan) . Lalu, di dalam C1 ada scrollview. Ini bekerja dengan baik untuk saya. Contoh di bawah ini.

<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
sumber
Menambahkan di atas ini, gaya nilai 0 kiri, kanan dan bawah harus disediakan agar dapat berfungsi.
IVI
5

Orang bisa mencapai sesuatu yang mirip dengan yang asli position: absolute

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

Ada beberapa hal yang perlu diingat.

  1. absolute memposisikan elemen relatif terhadap induknya.
  2. Anda mungkin harus mengatur lebar dan tinggi elemen secara manual.
  3. Lebar dan tinggi akan berubah ketika orientasi berubah. Ini harus dikelola secara manual

Definisi gaya praktis akan terlihat seperti ini:

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

Saya menemukan menggunakan flex menjadi solusi paling sederhana.

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

Ketika flex adalah angka positif, itu membuat komponen fleksibel dan ukurannya akan sebanding dengan nilai flex-nya. Jadi komponen dengan set flex ke 2 akan mengambil dua kali ruang sebagai komponen dengan set flex ke 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>
Luaskan cuplikan

iambinodstha
sumber
1
Silakan pertimbangkan untuk menambahkan beberapa penjelasan untuk jawaban Anda.
HMD
3

Cara terbaik adalah dengan menggunakan properti justifyContent

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

jika Anda memiliki beberapa elemen tampilan di layar, maka Anda dapat menggunakannya 

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

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

kemudian di tulis gaya ini

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

bekerja seperti pesona

Joseph Owigo
sumber
2

Untuk masalah Android dengan ini:

di app / src / AndroidManifest.xml ubah windowSoftInputMode menjadi yang berikut. 

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

Saya sama sekali tidak punya masalah dengan ini di ios menggunakan react-native dan keyboardAwareScroll. Saya akan menerapkan satu ton kode untuk mencari tahu ini sampai seseorang memberi saya solusi ini. Bekerja dengan sempurna.

Lisa Faye Cook
sumber
2

jika Anda hanya menggunakan reaksi asli sehingga Anda dapat menggunakan kode berikut

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

juga, Anda dapat menggunakan https://docs.nativebase.io/ dalam proyek asli reaksi Anda dan kemudian melakukan sesuatu seperti berikut ini

<Container>

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

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

</Content>

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

</Container>

React_Native

NativeBase.io

ab_did96
sumber
2

Set android: windowSoftInputMode = "AdjustPan" di file manifes Anda, dan itu akan berfungsi seperti yang Anda harapkan.

Andresh Singh
sumber
1

Saya pikir yang terbaik dan mudah akan seperti di bawah ini, hanya menempatkan sisa tampilan Anda dalam konten dan footer dalam tampilan terpisah.

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

atau Anda dapat menggunakan footer dari basis-asli

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

Saran 1

=> Tubuh dengan footer tetap

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

Gambar Demo

Edit 2

=> Badan & Footer Tetap dengan tab

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

masukkan deskripsi gambar di sini

Catatan

import {TouchableOpacity} in 'react-native'

Keuntungan

Kita dapat menggunakan catatan kaki sederhana ini tanpa bereaksi navigasi bawah

DevAelius
sumber