programing

반응 네이티브 고정 바닥글

newstyles 2023. 10. 6. 20:58

반응 네이티브 고정 바닥글

기존 웹 앱처럼 보이는 리액티브 네이티브 앱을 만들려고 합니다.창문 아래쪽에 고정된 바닥판이 있습니다.리액티브 네이티브로 어떻게 이것을 달성할 수 있는지 아는 사람?

기존 앱에서는 간단합니다.

.footer {
  position: fixed;
  bottom: 0;
}

콜린의 램지 답변에 근거한 실제 코드는 다음과 같습니다.

<View style={{flex: 1}}>
  <ScrollView>main</ScrollView>
  <View><Text>footer</Text></View>
</View>

당신은 스크롤 뷰로 이것을 할 수 있습니다.최상위 컨테이너는 상단에 스크롤 뷰가 있고 하단에 바닥글이 있는 플렉스 컨테이너일 수 있습니다.그런 다음 스크롤 뷰 안에 앱의 나머지 부분을 정상적으로 입력하면 됩니다.

저는 제 앱의 버튼에 고정 바닥글을 사용하고 있습니다.고정 바닥글을 구현하는 방법은 다음과 같습니다.

<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}을(를) 사용합니다.도움이 됐으면 좋겠네요!

먼저 차원을 얻은 다음 플렉스 스타일을 통해 조작합니다.

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>

@알렉산더 솔루션 감사합니다.

아래는 정확히 당신이 찾는 코드입니다.

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 With Fixed Footer

간단한 것들은 다음과 같습니다.

이 접근 방식을 위해 스크롤 뷰가 필요 없는 경우 아래 코드를 사용하여 다음과 같은 것을 달성할 수 있습니다.

Something like this

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

NativeBase(http://nativebase.io )를 살펴볼 수도 있습니다.헤더 및 바닥글을 포함한 멋진 레이아웃 구조(http://nativebase.io/docs/v2.0.0/components#anatomy) 를 포함한 React Native의 구성 요소 라이브러리입니다.

이것은 모바일용 부트스트랩(Bootstrap for Mobile)과 약간 비슷합니다.

이렇게 한 방법은 플렉스 1을 사용하여 뷰(P라고 함)를 생성한 다음 뷰 내부에 플렉스 0.9 및 0.1을 사용하여 2개의 뷰(C1 및 C2)를 더 생성하는 것이었습니다(플렉스 높이를 필요한 값으로 변경할 수 있음).그러면 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>

플렉스가 양수일 경우 구성요소가 유연해지고 플렉스 값에 비례하여 크기가 조정됩니다.따라서 플렉스를 2로 설정한 구성요소는 플렉스를 1로 설정한 구성요소에 비해 두 배의 공간을 차지하게 됩니다.

   <View style={{flex: 1}>
            
     <ScrollView style={{flex: 1}>
        //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>

아래는 바닥글과 위의 요소를 설정하기 위한 코드입니다.

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

어떤 사람은 다음과 같은 반응을 얻을 수 있었습니다.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
}

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

Demo Image

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

enter image description here

메모들

import {TouchableOpacity} from 'react-native'

이점

리액트 바텀 내비게이션 없이 간단한 발찌를 사용할 수 있습니다.

justiceContent 속성을 사용하는 것이 가장 좋은 방법입니다.

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

플렉스를 사용하는 것이 가장 간단한 해결책임을 알게 되었습니다.

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

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,

일을 아주 잘했습니다.

만약 당신이 리액트 네이티브를 사용한다면 당신은 다음의 코드를 사용할 수 있습니다.

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

반응_네이티브

NativeBase.io

이와 관련된 Android 문제의 경우:

app/src/AndroidManifest.xml 변경 창에서 소프트다음에 입력 모드를 입력합니다.

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

저는 리액트 네이티브와 키보드 어웨어스크롤을 사용하는 이 ios에는 전혀 문제가 없었습니다.누군가가 이 해결책을 주기 전까지 이 문제를 해결하기 위해 수많은 코드를 구현하려던 참이었습니다.완벽하게 작동했습니다.

매니페스트 파일에 Android:windowSoftInputMode="adjustPan"을 설정하면 원하는 대로 작동합니다.

저는 여러 가지를 조합해서 사용해봤습니다.height: 100%그리고.flex: 1.

<View style={{ height: "100%" }}>
      <View
        style={{
          display: "flex",
          flexDirection: "row",
          alignItems: "center",
          height: 50,
        }}
      >
        {R.map(
          tab => (
            <TouchableOpacity
              key={tab.id}
              onPress={() => setCurrentTab(tab)}
            >
              <Text>{tab.name}</Text>
            </TouchableOpacity>
          ),
          tabs
        )}
      </View>
      <View style={{ flex: 1 }}>
        <View style={{ height: "100%" }}>
          <View style={{ flex: 1 }}>
           <ScrollView
             style={{
              width: "100%",
             }}
           >
           ... ScrollView content
           </ScrollView>
          </View>
         <View
        style={{
          borderTopColor: "#dadada",
          borderTopWidth: 1,
          width: "100%",
          alignItems: "center",
          justifyContent: "center",
          height: 60,
          paddingBottom: 10,
        }}
      >
        <TouchableOpacity
          style={{
            padding: 8,
            borderRadius: 3,
          }}
        >
          <Text>
            Show Results
          </Text>
        </TouchableOpacity>
      </View>
      </View>
</View>

바닥판을 하단에 쉽게 고정할 수 있는 방법:

import { StyleSheet, Text, View } from 'react-native'
import React from 'react'

const Footer = () => {
    return (
        <View style={styles.footer}>
            <Text style={{ color: 'black', fontSize: 15 }}>All rights reserved, 2022</Text>
        </View>
    )
}

const styles = StyleSheet.create({
    footer: {
        position: 'absolute',
        bottom: 0,
        left: 0,
        right: 0,
        backgroundColor: '#F4CE14',
        padding: 10,
        justifyContent: 'center',
        alignItems: 'center',
    },
})

export default Footer;

가장 좋고 쉬운 것은 아래와 같습니다. 보기의 나머지 부분은 컨텐츠에 배치하고 바닥글은 별도의 보기에 배치하면 됩니다.

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

또는 네이티브 베이스의 풋터를 사용할 수 있습니다.

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

저는 패키지를 만들었습니다.당신의 필요를 충족시킬 수도 있습니다.

https://github.com/caoyongfeng0214/rn-overlaye

<View style={{paddingBottom:100}}>
     <View> ...... </View>
     <Overlay style={{left:0, right:0, bottom:0}}>
        <View><Text>Footer</Text></View>
     </Overlay>
</View>

다음과 같은 스타일 만들기:

const styles = StyleSheet.create({
  header:{ backgroundColor: "#00BFFF", height: "20%" },
  footer:{ backgroundColor: "royalblue", height: "10%", flexDirection: "row", alignItems: "center" }
});

그런 다음 태그에서 스타일을 사용합니다.

            <View style={styles.footer}>
                <View style={{ flex: 1, alignItems: "center" }}>
                    <Pressable onPress={() => openCamera(true)}>
                        <View style={{ flexDirection: "column", alignItems: "center" }}>
                            <Icon name="camera" style={{ fontSize: 21, color: "white" }}/>
                            <Text style={{ color: "white" }}>Photo</Text>
                        </View>
                    </Pressable>
                </View>
</View>

언급URL : https://stackoverflow.com/questions/29447715/react-native-fixed-footer

'programing' 카테고리의 다른 글

asp.net 웹사이트에서 쿠키 값을 얻는 방법  (0) 2023.10.06
Javascript/jQuery를 사용하여 HTML 요소에서 모든 특성 가져오기  (0) 2023.10.06
mariadb에서 타임스탬프를 사용하여 사용자 지정 기본 키를 생성하는 방법  (0) 2023.10.06
형제자매 지시사항과 의사소통  (0) 2023.10.06
InnoDB 테이블을 My ISAM 테이블과 결합하는 중  (0) 2023.10.06

'programing'의 다른글

  • 현재글반응 네이티브 고정 바닥글

관련글

댓글

티스토리툴바