ตอบสนองส่วนท้ายคงที่ดั้งเดิม

128

ฉันพยายามสร้างแอปตอบกลับที่มีลักษณะเหมือนเว็บแอปที่มีอยู่ ฉันมีส่วนท้ายคงที่ที่ด้านล่างของหน้าต่าง ใครมีความคิดว่าจะทำได้อย่างไรกับ react native?

ในแอพที่มีอยู่มันง่ายมาก:

.footer {
  position: fixed;
  bottom: 0;
}
react-native 
— 4ega
แหล่งที่มา

คำตอบ:

167

ปิดด้านบนของหัวของฉันคุณสามารถทำเช่นนี้กับScrollView คอนเทนเนอร์ระดับบนสุดของคุณอาจเป็นคอนเทนเนอร์แบบยืดหยุ่นซึ่งภายในมี ScrollView ที่ด้านบนและส่วนท้ายของคุณที่ด้านล่าง จากนั้นภายใน ScrollView ให้วางส่วนที่เหลือของแอปตามปกติ

— โคลินแรมเซย์
แหล่งที่มา
ใช้งานได้ดี =) ขอบคุณเพิ่งเพิ่มheightไปยังส่วนท้ายดูและดูดีใน 4s และ 6
— 4ega
1
นี้ได้ผล แต่ฉันไม่เข้าใจว่าทำไม ทำไมถึงได้ผล?
— Aditi
172

นี่คือรหัสจริงตามคำตอบ Ramsay ของ Colin:

<View style={{flex: 1}}>
  <ScrollView>main</ScrollView>
  <View><Text>footer</Text></View>
</View>
— Alexander Zaytsev
แหล่งที่มา
1
ใช่ฉันลองแล้ว แต่ไม่มีการดิ้นไม่ทำงาน: D ขอบคุณที่กดเพื่อลองอีกครั้ง :) และถ้าคุณคลิกที่อินพุตฉันต้องการพูดถึงเพื่อใช้ onContentSizeChange สิ่งที่ฉันทำคือเลื่อน scrollview ด้านบนเป็นแบบนี้ onContentSizeChange = {(width, height) => this.refs.scrollView.scrollTo ({y: this.state.onInputSelectScrollViewPaddingSize})}
— Ernestyno
1
มันไม่ทำงาน ฉันไม่เห็นว่าทำไมมันถึงใช้ได้ในทุกกรณี
— Paulo Roberto Rosa
64

ฉันใช้ส่วนท้ายคงที่สำหรับปุ่มต่างๆในแอปของฉัน วิธีที่ฉันใช้ส่วนท้ายคงที่เป็นดังนี้:

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

และหากต้องการให้ส่วนท้ายเลื่อนขึ้นเมื่อแป้นพิมพ์ปรากฏขึ้นคุณสามารถใช้:

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

จากนั้นใช้ {bottom: this.state.btnLocation} ในคลาสส่วนท้ายคงที่ของคุณ ฉันหวังว่านี่จะช่วยได้!

— dahveed707
แหล่งที่มา
2
ใครก็ตามที่ได้รับ "undefined ไม่ใช่วัตถุ (ประเมิน" DeviceEventEmitter.addListener ")" เมื่อพยายามทำ "this.setState (... )" บนตัวฟังคีย์บอร์ด
— John Sardinha
@JohnSardinha ลองimport { Keyboard} from 'react-native'; Keyboard.addListener('keyboardWillShow', this.showHandler)แทนสิ
— maxhungry
23

คุณจะได้รับมิติข้อมูลก่อนจากนั้นจึงจัดการผ่านรูปแบบดิ้น

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

ในการแสดงผล

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

อีกวิธีคือใช้ดิ้น

<View style={{flex: 1}}>
    <View style={{flex: .8}}>main</View>
    <View style={{flex: .2}}>footer</View>
</View>
— syarul
แหล่งที่มา
17

@Alexander ขอบคุณสำหรับการแก้ปัญหา

ด้านล่างนี้คือรหัสสิ่งที่คุณกำลังมองหา

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

ด้านล่างนี้คือภาพหน้าจอ

ScrollView พร้อมส่วนท้ายคงที่

— เถ้าแก่ร
แหล่งที่มา
ตัวอย่างที่ดี :)
— joey rohan
7

คุณอาจต้องการดู NativeBase ( http://nativebase.io ) นี่คือไลบรารีของส่วนประกอบสำหรับ React Native ที่มีโครงสร้างเลย์เอาต์ที่ดี ( http://nativebase.io/docs/v2.0.0/components#anatomy ) รวมทั้งส่วนหัวและส่วนท้าย

คล้ายกับ Bootstrap for Mobile

— Simon Ordish
แหล่งที่มา
1
ไม่รวมเค้าโครงสำหรับส่วนท้ายคงที่
— svlada
7

สิ่งง่ายๆที่นี่:

ในกรณีที่คุณไม่จำเป็นต้องใช้ ScrollView สำหรับแนวทางนี้คุณสามารถใช้รหัสด้านล่างเพื่อให้ได้สิ่งนี้:

อะไรทำนองนี้

<View style={{flex: 1, backgroundColor:'grey'}}>
    <View style={{flex: 1, backgroundColor: 'red'}} />
    <View style={{height: 100, backgroundColor: 'green'}} />
</View>
— Cherag Verma
แหล่งที่มา
7

ด้านล่างนี้คือรหัสสำหรับตั้งค่าส่วนท้ายและองค์ประกอบด้านบน

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
แหล่งที่มา
6

วิธีที่ฉันทำคือการมีมุมมอง (เรียกว่า P) ด้วย flex 1 จากนั้นภายในมุมมองนั้นจะมีมุมมองอีก 2 มุมมอง (C1 และ C2) โดยมีความยืดหยุ่น 0.9 และ 0.1 ตามลำดับ (คุณสามารถเปลี่ยนความสูงของการยืดหยุ่นเป็นค่าที่ต้องการได้) . จากนั้นภายใน C1 จะมีมุมมองแบบเลื่อน สิ่งนี้ใช้ได้ผลอย่างสมบูรณ์สำหรับฉัน ตัวอย่างด้านล่าง

<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
แหล่งที่มา
การเพิ่มด้านบนนี้ต้องระบุรูปแบบด้านซ้ายขวาและด้านล่างของค่า 0 เพื่อให้ใช้งานได้
— IVI
5

หนึ่งสามารถบรรลุสิ่งที่คล้ายกันในปฏิกิริยาพื้นเมืองด้วย position: absolute

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

มีบางสิ่งที่ควรทราบ

  1. absolute วางตำแหน่งองค์ประกอบที่สัมพันธ์กับพาเรนต์
  2. คุณอาจต้องตั้งค่าความกว้างและความสูงขององค์ประกอบด้วยตนเอง
  3. ความกว้างและความสูงจะเปลี่ยนไปเมื่อการวางแนวเปลี่ยนไป สิ่งนี้จะต้องจัดการด้วยตนเอง

คำจำกัดความของสไตล์ที่ใช้ได้จริงจะมีลักษณะดังนี้:

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
แหล่งที่มา
5

ฉันพบว่าการใช้ flex เป็นวิธีที่ง่ายที่สุด

<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
แหล่งที่มา
4

เมื่อเฟล็กซ์เป็นจำนวนบวกจะทำให้ส่วนประกอบมีความยืดหยุ่นและจะมีขนาดตามสัดส่วนกับค่าเฟล็กซ์ ดังนั้นคอมโพเนนต์ที่มีเฟล็กตั้งค่าเป็น 2 จะใช้พื้นที่เป็นสองเท่าของคอมโพเนนต์ที่มีเฟล็กตั้งค่าเป็น 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>
ขยายข้อมูลโค้ด

— iambinodstha
แหล่งที่มา
1
โปรดพิจารณาเพิ่มคำอธิบายในคำตอบของคุณ
— HMD
3

วิธีที่ดีที่สุดคือใช้คุณสมบัติ justifyContent

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

หากคุณมีองค์ประกอบมุมมองหลายรายการบนหน้าจอคุณสามารถใช้ 

<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
แหล่งที่มา
3 
import {Dimensions} from 'react-native'

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

จากนั้นเขียนลักษณะนี้

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

ทำงานเหมือนมีเสน่ห์

— โจเซฟโอวิโก
แหล่งที่มา
2

สำหรับปัญหาของ Android เกี่ยวกับสิ่งนี้:

ใน app / src / AndroidManifest.xml เปลี่ยน windowSoftInputMode เป็นดังต่อไปนี้ 

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

ฉันไม่มีปัญหากับสิ่งนี้ใน iOS โดยใช้ react-native และ keyboardAwareScroll ฉันกำลังจะใช้โค้ดจำนวนมากเพื่อหาสิ่งนี้จนกว่าจะมีคนให้คำตอบนี้แก่ฉัน ทำงานได้อย่างสมบูรณ์แบบ

— Lisa Faye Cook
แหล่งที่มา
2

หากคุณใช้ react native เพื่อให้คุณสามารถใช้รหัสต่อไปนี้

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

นอกจากนี้คุณสามารถใช้https://docs.nativebase.io/ในโครงการเนทีฟตอบสนองของคุณจากนั้นทำสิ่งต่อไปนี้

<Container>

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

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

</Content>

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

</Container>

React_Native

NativeBase.io

— ab_did96
แหล่งที่มา
2

ตั้งค่า android: windowSoftInputMode = "adjustmentPan" ในไฟล์ manifest ของคุณและมันจะทำงานตามที่คุณคาดหวัง

— Andresh Singh
แหล่งที่มา
1

ฉันคิดว่าสิ่งที่ดีและง่ายที่สุดจะเป็นดังต่อไปนี้เพียงวางส่วนที่เหลือของมุมมองของคุณในเนื้อหาและส่วนท้ายในมุมมองที่แยกจากกัน

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

หรือคุณสามารถใช้ส่วนท้ายจากฐานดั้งเดิม

`<Container>
  <Content>
    <View>
Ur contents
    </View>
  </Content>
<Footer>
Footer
</Footer>
</Container>`
— Aishwarya Shetty
แหล่งที่มา
1

ข้อเสนอแนะ 1

=> เนื้อหาที่มีส่วนท้ายคงที่

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

ภาพสาธิต

แก้ไข 2

=> เนื้อหาและส่วนท้ายคงที่พร้อมแท็บ

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

ป้อนคำอธิบายภาพที่นี่

หมายเหตุ

import {TouchableOpacity} in 'react-native'

ข้อดี

เราสามารถใช้ส่วนท้ายง่ายๆนี้ได้โดยไม่ต้องตอบสนองการนำทางด้านล่าง

— DevAelius
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.