React Native sabit altbilgi

128

Mevcut web uygulamasına benzeyen tepki veren yerel uygulama oluşturmaya çalışıyorum. Pencerenin altında sabit bir altbilgim var. Bunun yerel tepki ile nasıl başarılabileceği hakkında bir fikri olan var mı?

mevcut uygulamada çok basit:

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

Yanıtlar:

167

Aklımın ucunda bunu bir ScrollView ile yapabilirsiniz . Üst düzey kapsayıcınız, içinde bir ScrollView ve altta altbilginiz bulunan esnek bir kapsayıcı olabilir. Ardından ScrollView'a uygulamanızın geri kalanını normal şekilde yerleştirin.

— Colin Ramsay
kaynak
harika çalışıyor =) thx, heightaltbilgi görünümüne yeni eklendi ve 4s ve 6
— 4ega
1
Bu çalışıyor. Ama nedenini anlayamadım. Bu neden işe yarıyor?
— Aditi
172

Colin'in Ramsay cevabına dayanan gerçek kod:

<View style={{flex: 1}}>
  <ScrollView>main</ScrollView>
  <View><Text>footer</Text></View>
</View>
— Alexander Zaytsev
kaynak
1
Evet denedim ama flex olmadan işe yaramadı: D Tekrar denemek için push için teşekkürler :) Ve eğer girdiye tıkladıysanız onContentSizeChange kullanmaktan bahsetmek istiyorum. Yaptığım şeyi yukarı kaydırdım: onContentSizeChange = {(width, height) => this.refs.scrollView.scrollTo ({y: this.state.onInputSelectScrollViewPaddingSize})}
— Ernestyno
1
çalışmıyor. Neden her durumda işe yarayacağını anlayamıyorum
— Paulo Roberto Rosa
64

Uygulamamdaki düğmeler için sabit altbilgiler kullanıyorum. Sabit bir altbilgi uygulama şeklim şu şekildedir:

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

Ve örneğin bir klavye göründüğünde altbilginin yukarı çıkması gerekiyorsa, şunları kullanabilirsiniz:

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

Ardından, sabit altbilgi sınıfınızda {bottom: this.state.btnLocation} kullanın. Umarım bu yardımcı olur!

— dahveed707
kaynak
2
Klavye dinleyicilerinde 'this.setState (...)' yapmaya çalışırken 'undefined bir nesne değil ("DeviceEventEmitter.addListener" değerini değerlendirerek)' alan biri?
— John Sardinha
@JohnSardinha Onun import { Keyboard} from 'react-native'; Keyboard.addListener('keyboardWillShow', this.showHandler)yerine deneyin .
— maxhungry
23

Önce Dimension'ı alırsınız ve sonra onu esnek stil ile işlersiniz

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

Oluşturmada

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

Diğer yöntem de esnek kullanmaktır

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

@Alexander Çözüm için teşekkürler

Aşağıda tam olarak aradığınız kod var

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

Ekran görüntüsü aşağıdadır

Sabit Altbilgiyle ScrollView

— Ashok R
kaynak
Güzel örnek :)
— joey rohan
7

Burada basit şeyler:

Bu yaklaşım için bir ScrollView'a ihtiyacınız yoksa, bunun gibi bir şey elde etmek için aşağıdaki kodu kullanabilirsiniz:

Bunun gibi bir şey

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

Aşağıda, yukarıdaki altbilgi ve öğeleri ayarlama kodu verilmiştir.

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

Bunu yapmamın yolu, flex 1 ile bir görünüme sahip olmaktı (buna P diyelim), ardından bu görünümün içinde sırasıyla flex 0.9 ve 0.1 ile 2 görünüm daha (C1 ve C2) elde etmekti (flex yüksekliklerini gerekli değerlere değiştirebilirsiniz) . Ardından, C1'in içinde bir kaydırma görünümüne sahip olun. Bu benim için mükemmel çalıştı. Aşağıdaki örnek.

<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
kaynak
Üstüne ekleyerek, çalışabilmesi için 0 değerinin sol, sağ ve alt stilleri sağlanmalıdır.
— IVI
5

Benzer bir şey elde edilebilir. position: absolute

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

Yine de akılda tutulması gereken birkaç şey var.

  1. absolute öğeyi üst öğeye göre konumlandırır.
  2. Öğenin genişliğini ve yüksekliğini manuel olarak ayarlamanız gerekebilir.
  3. Yön değiştiğinde genişlik ve yükseklik değişecektir. Bunun manuel olarak yönetilmesi gerekir

Pratik bir stil tanımı şuna benzer:

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

Flex kullanmayı en basit çözüm olarak buldum.

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

Flex pozitif bir sayı olduğunda, bileşeni esnek hale getirir ve esnek değeriyle orantılı olarak boyutlandırılır. Dolayısıyla, flex değeri 2 olan bir bileşen, flex 1 olarak ayarlanmış bir bileşene göre iki kat daha fazla yer kaplar.

   <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>
Snippet'i genişlet

— iambinodstha
kaynak
1
Lütfen cevabınıza bir açıklama eklemeyi düşünün.
— HMD
3

En iyi yol justifyContent özelliğini kullanmaktır

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

Ekranda birden fazla görünüm öğeniz varsa, 

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

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

sonra bu stilleri yaz

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

bir cazibe gibi çalıştı

— Joseph Owigo
kaynak
2

Bununla ilgili Android sorunları için:

app / src / AndroidManifest.xml dosyasında windowSoftInputMode'u aşağıdaki gibi değiştirin. 

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

React-native ve keyboardAwareScroll kullanarak ios'ta bununla kesinlikle hiçbir sorun yaşamadım. Birisi bana bu çözümü verene kadar bunu çözmek için bir ton kod uygulamak üzereydim. Mükemmel çalıştı.

— Lisa Faye Cook
kaynak
2

sadece react native kullanıyorsanız, aşağıdaki kodu kullanabilirsiniz

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

ayrıca, react native projenizde https://docs.nativebase.io/ kullanabilir ve ardından aşağıdaki gibi bir şey yapabilirsiniz.

<Container>

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

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

</Content>

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

</Container>

React_Native

NativeBase.io

— ab_did96
kaynak
2

Manifest dosyanızda android: windowSoftInputMode = "AdjustPan" değerini ayarlayın ve beklediğiniz gibi çalışacaktır.

— Andresh Singh
kaynak
1

Bence en iyisi ve kolay olanı aşağıdaki gibi olacaktır, sadece görünümünüzün geri kalanını bir içeriğe ve altbilgiyi ayrı bir görünüme yerleştirin.

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

veya yerel tabandaki altbilgiyi kullanabilirsiniz

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

Öneri 1

=> Sabit alt bilgili gövde

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

Demo Resmi

Düzenle 2

=> Sekmeli Gövde ve Sabit altbilgi

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

görüntü açıklamasını buraya girin

notlar

import {TouchableOpacity} in 'react-native'

Avantajları

Bu basit altbilgiyi, alt gezinmeye tepki vermeden kullanabiliriz

— DevAelius
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.