নেটিভ নির্দিষ্ট পাদলেখ প্রতিক্রিয়া

128

আমি বিদ্যমান ওয়েব অ্যাপ্লিকেশনটির মতো দেখতে রিএ্যাক্ট নেটিভ অ্যাপ্লিকেশন তৈরি করার চেষ্টা করছি। উইন্ডোর নীচে আমার একটি স্থির ফুটার রয়েছে। দেশীয় প্রতিক্রিয়াটি দিয়ে কীভাবে এটি অর্জন করা যেতে পারে সে সম্পর্কে কারও ধারণা আছে?

বিদ্যমান অ্যাপ্লিকেশন এ এটি সহজ:

.footer {
  position: fixed;
  bottom: 0;
}
react-native 
— 4ega
সূত্র

উত্তর:

166

আমার মাথার উপরে অফ আপনি যদি একটি সঙ্গে এই কাজ করতে পারে ScrollView । আপনার শীর্ষ স্তরের ধারকটি একটি ফ্লেক্স ধারক হতে পারে যার ভিতরে শীর্ষে স্ক্রোলভিউ এবং নীচে আপনার পাদচরণ থাকতে পারে। তারপরে স্ক্রোলভিউয়ের অভ্যন্তরে আপনার বাকী অ্যাপ্লিকেশনটিকে কেবল স্বাভাবিক হিসাবে রাখুন।

— কলিন রামসে
সূত্র
দুর্দান্ত =) thx কাজ করে, heightপাদলেখ দৃশ্যে সবে যুক্ত হয়েছে এবং এটি 4s এবং 6
— 4ega
1
এইটা কাজ করে. তবে কেন বুঝতে পারছিলাম না। কেন এই কাজ করে?
— অদিতি
171

কলিনের রামসে উত্তরের ভিত্তিতে আসল কোডটি এখানে:

<View style={{flex: 1}}>
  <ScrollView>main</ScrollView>
  <View><Text>footer</Text></View>
</View>
— আলেকজান্ডার জায়েতসেভ
সূত্র
1
হ্যাঁ আমি এটি চেষ্টা করেছিলাম তবে ফ্লেক্স ছাড়াই কাজ হয়নি: ডি আবার চেষ্টা করার জন্য ধাক্কা দেওয়ার জন্য ধন্যবাদ :) এবং আপনি যদি ইনপুটটিতে ক্লিক করেন তবে আমি onContentSizeChange ব্যবহার করতে চাই mention সুতরাং আমি কী স্ক্রোলভিউয়ের উপরের দিকে স্ক্রোল করেছি তা: onContentSizeChange = {(প্রস্থ, উচ্চতা) => this.refs.scrolView.scrolTo ({y: this.state.onInputSelectScrolViewPaddingSize ding)}
— এরনেস্টেনি
1
এটা কাজ করে না। এটি কোনও ক্ষেত্রে কেন কাজ করবে তা আমি বুঝতে পারছি না
— পাওলো রবার্তো রোজা
63

আমি আমার অ্যাপে বোতামের জন্য স্থির পাদচরণ ব্যবহার করছি। আমি একটি নির্দিষ্ট পাদলেখ প্রয়োগ করার উপায়টি এরকম:

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

তারপরে আপনার স্থির পাদলেখ শ্রেণিতে নীচে: this.state.btnLocation use ব্যবহার করুন। আশা করি এটা কাজে লাগবে!

— dahveed707
সূত্র
2
কীবোর্ড শ্রোতাদের 'this.setState (...)' করার চেষ্টা করার সময় 'অপরিজ্ঞাতকৃত যে কোনও ব্যক্তি ("ডিভাইসএভেন্টিমিটার.এডিডিলিস্টনার" মূল্যায়ন করছেন) নয়?
— জন সারদিনহা
এর import { Keyboard} from 'react-native'; Keyboard.addListener('keyboardWillShow', this.showHandler)পরিবর্তে জনসর্দিনহা চেষ্টা করুন।
— ম্যাক্সহংরি
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

@ আলেকজান্ডার সমাধানের জন্য ধন্যবাদ

নীচে কোডটি যা আপনি খুঁজছেন ঠিক তা হল is

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

স্ক্রিনশট নীচে

স্থির পাদলেখ সহ স্ক্রোলভিউ

— অশোক আর
সূত্র
সুন্দর উদাহরণ :)
— জয়ে রোহান
7

আপনি হয়ত নেটিভবেস ( http://nativebase.io ) এ একবার দেখতে চান । প্রতিক্রিয়া নেটিভের জন্য এটি উপাদানগুলির একটি গ্রন্থাগার যা কিছু দুর্দান্ত লেআউট কাঠামো অন্তর্ভুক্ত করে ( যা শিরোনাম এবং পাদচরণ সহ http://nativebase.io/docs/v2.0.0/comp घटक# anatomy ) অন্তর্ভুক্ত করে।

এটি মোবাইলের জন্য বুটস্ট্র্যাপের মতো।

— সাইমন অর্দিশ
সূত্র
1
এটিতে নির্দিষ্ট পাদলেখের জন্য বিন্যাস অন্তর্ভুক্ত নয়।
— সোভালদা
7

সাধারণ জিনিস এখানে:

এই পদ্ধতির জন্য আপনার যদি কোনও স্ক্রোলভিউয়ের প্রয়োজন না হয় তবে এরকম কিছু অর্জনের জন্য আপনি নীচের কোডটি দিয়ে যেতে পারেন:

এটার মতো কিছু

<View style={{flex: 1, backgroundColor:'grey'}}>
    <View style={{flex: 1, backgroundColor: 'red'}} />
    <View style={{height: 100, backgroundColor: 'green'}} />
</View>
— চেরাগ ভার্মা
সূত্র
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,
  },
});
— শ্রুতি গার্গ
সূত্র
6

আমি যেভাবে এটি করেছি তা হল ফ্লেক্স 1 সহ একটি দর্শন (এটি পি বলে ডাকুন), তারপরে সেই দৃশ্যের অভ্যন্তরে যথাক্রমে 0.9 এবং 0.1 এর সাথে আরও 2 টি ভিউ (সি 1 এবং সি 2) থাকতে হবে (আপনি প্রয়োজনীয় মানগুলিতে ফ্লেক্স উচ্চতা পরিবর্তন করতে পারেন) । তারপরে, সি 1 এর ভিতরে একটি স্ক্রোলভিউ রয়েছে। এটি আমার জন্য পুরোপুরি কাজ করেন। নীচে উদাহরণ।

<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>
— রাজেশ
সূত্র
এর উপরে যুক্ত করে 0 টির বাম, ডান এবং নীচের শৈলীগুলি এটি কাজ করার জন্য সরবরাহ করতে হবে।
— আইভিআই
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
}
— আকাশ কুরিয়ান জোস
সূত্র
5

আমি সহজ সমাধান হিসাবে ফ্লেক্স ব্যবহার করে খুঁজে পেয়েছি।

<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
আপনার উত্তরে কিছু ব্যাখ্যা যোগ করার বিষয়ে দয়া করে বিবেচনা করুন।
— এইচএমডি
3

জাস্টিফাইটি কনটেন্ট সম্পত্তি ব্যবহার করার সর্বোত্তম উপায়

<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>
— মনজুর সামাদ
সূত্র
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

এর সাথে অ্যান্ড্রয়েড সমস্যার জন্য:

অ্যাপ্লিকেশন / এসসিআর / অ্যান্ড্রয়েড ম্যানিফেস্ট.এক্সএমএল উইন্ডো সফট ইনপুটমোডকে নিম্নলিখিতটিতে পরিবর্তন করুন। 

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

রিঅ্যাক্ট-নেটিভ এবং কীবোর্ডআওয়্যারস্ক্রোল ব্যবহার করে আইওএসে আমার একেবারে কোনও সমস্যা ছিল না। কেউ আমাকে এই সমাধান না দেওয়ার আগ পর্যন্ত আমি এটি বের করার জন্য একটি টন কোড প্রয়োগ করতে চলেছি। নিখুঁতভাবে কাজ করেছেন।

— লিসা ফায়ে কুক
সূত্র
2

আপনি যদি কেবলমাত্র দেশীয় প্রতিক্রিয়া ব্যবহার করেন তবে নীচের কোডটি ব্যবহার করতে পারেন

<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

অ্যান্ড্রয়েড সেট করুন: আপনার ম্যানিফেস্ট ফাইলে উইন্ডোসফট ইনপুটমড = "অ্যাডজাস্টপ্যান", এবং এটি আপনার প্রত্যাশা অনুযায়ী কাজ করবে।

— আন্দ্রেশ সিংহ
সূত্র
1

আমি মনে করি সবচেয়ে নিখুঁত এবং সহজ নীচের মত হবে, কেবল আপনার সামগ্রীর বাকী অংশটি একটি সামগ্রী এবং পাদলেখকে পৃথক দৃশ্যে রাখুন।

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

অথবা আপনি স্থানীয়-বেস থেকে পাদলেখ ব্যবহার করতে পারেন

`<Container>
  <Content>
    <View>
Ur contents
    </View>
  </Content>
<Footer>
Footer
</Footer>
</Container>`
— .শ্বরিয়া শেঠি
সূত্র
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.