একটি নির্দিষ্ট দৃশ্যের আকার (প্রস্থ এবং উচ্চতা) পাওয়া কি সম্ভব? উদাহরণস্বরূপ, আমার অগ্রগতি দেখানোর মতামত রয়েছে:
<View ref='progressBar' style={{backgroundColor:'red',flex:this.state.progress}} /> অন্যান্য মতামতগুলি সঠিকভাবে সারিবদ্ধ করতে আমার ভিউটির প্রকৃত প্রস্থটি জানতে হবে। এটা কি সম্ভব?
উত্তর:
দেশীয় 0.4.2 প্রতিক্রিয়া হিসাবে, দেখুন উপাদান একটি আছে onLayoutঠেকনা । কোনও ইভেন্টের বিষয়বস্তু নিয়ে যাওয়া কোনও ফাংশনে পাস করুন। ইভেন্টটির nativeEventমধ্যে ভিউটির লেআউট রয়েছে।
<View onLayout={(event) => {
var {x, y, width, height} = event.nativeEvent.layout;
}} />onLayoutযখনই ভিউটির আকার পরিবর্তন করা হবে তখন হ্যান্ডলারটিও আহ্বান করা হবে।
মূল সতর্কতাটি হ'ল onLayoutহ্যান্ডলারটি আপনার উপাদানটি মাউন্ট করার পরে প্রথমে একটি ফ্রেমের জন্য অনুরোধ করা হয়, সুতরাং আপনি নিজের বিন্যাসটি গণনা না করা পর্যন্ত আপনি আপনার ইউআই লুকিয়ে রাখতে চাইতে পারেন।
Viewমাত্রাগুলির উপর নির্ভর করে আলাদাভাবে প্রদর্শন করতে চাই । আমি onLayoutকীভাবে ভিউটি প্রদর্শন করব তা পরিবর্তন করতে আমি কীভাবে ভিউর ফাংশনটি ব্যবহার করতে পারি তা বুঝতে পারি না । এটি কি অসীম লুপকে নিয়ে যায় না?
onLayoutসম্পর্কিত নয়।
এটিই আমার পক্ষে কাজ করেছে:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image
} from 'react-native';
export default class Comp extends Component {
find_dimesions(layout){
const {x, y, width, height} = layout;
console.warn(x);
console.warn(y);
console.warn(width);
console.warn(height);
}
render() {
return (
<View onLayout={(event) => { this.find_dimesions(event.nativeEvent.layout) }} style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('Comp', () => Comp);মূলত আপনি যদি আকার সেট করতে চান এবং এটিকে পরিবর্তন করতে চান তবে এ জাতীয় লেআউটে এটি লিখুন:
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, View } from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'yellow',
},
View1: {
flex: 2,
margin: 10,
backgroundColor: 'red',
elevation: 1,
},
View2: {
position: 'absolute',
backgroundColor: 'orange',
zIndex: 3,
elevation: 3,
},
View3: {
flex: 3,
backgroundColor: 'green',
elevation: 2,
},
Text: {
fontSize: 25,
margin: 20,
color: 'white',
},
});
class Example extends Component {
constructor(props) {
super(props);
this.state = {
view2LayoutProps: {
left: 0,
top: 0,
width: 50,
height: 50,
}
};
}
onLayout(event) {
const {x, y, height, width} = event.nativeEvent.layout;
const newHeight = this.state.view2LayoutProps.height + 1;
const newLayout = {
height: newHeight ,
width: width,
left: x,
top: y,
};
this.setState({ view2LayoutProps: newLayout });
}
render() {
return (
<View style={styles.container}>
<View style={styles.View1}>
<Text>{this.state.view2LayoutProps.height}</Text>
</View>
<View onLayout={(event) => this.onLayout(event)}
style={[styles.View2, this.state.view2LayoutProps]} />
<View style={styles.View3} />
</View>
);
}
}
AppRegistry.registerComponent(Example);আপনি কীভাবে এটি পরিবর্তন করতে হবে তার আরও অনেক প্রকরণ তৈরি করতে পারেন, এটি অন্য উপাদানটিতে ব্যবহার করে যা মোড়ক হিসাবে অন্য দৃষ্টিভঙ্গি রয়েছে এবং একটি অন রেসপন্ডাররেইলজ কলব্যাক তৈরি করতে পারে, যা স্পর্শ ইভেন্টের অবস্থানটি রাজ্যে প্রবেশ করতে পারে, যা পরে সন্তানের অংশে যেতে পারে could সম্পত্তি হিসাবে, যা স্থাপন {[styles.View2, this.state.view2LayoutProps, this.props.touchEventTopLeft]}এবং আরও কিছু নিয়ে লেআউট আপডেট হওয়া অবস্থায় ওভাররাইড করতে পারে ।
আপনি সরাসরি Dimensionsমডিউলটি ব্যবহার করতে পারেন এবং আপনার দর্শন মাপগুলি গণনা করতে পারেন । প্রকৃতপক্ষে, Dimensionsআপনাকে উইন্ডোটির প্রধান আকার দিন give
import { Dimensions } from 'Dimensions';
Dimensions.get('window').height;
Dimensions.get('window').width;আপনাকে সাহায্য আশা করি!
আপডেট : আজ ফ্লেক্সেরStyleSheet সাথে নেটিভ ব্যবহার করছেন আপনার নেভিগেশন মতামত সাজানোর জন্য বিস্তৃত ক্ষেত্রে মার্জিত বিন্যাস সমাধান সহ পরিষ্কার কোড লিখতে সহায়তা করে পরিবর্তে আপনার দর্শন মাপগুলি গণনা করুন ...
যদিও কাস্টম গ্রিড উপাদানগুলি তৈরি করা , যা মূল উইন্ডোর পুনরায় আকারের ইভেন্টগুলিতে সাড়া দেয়, সাধারণ উইজেটের উপাদানগুলিতে একটি ভাল সমাধান তৈরি করতে পারে
আপনি ব্যবহার করতে পারেন measure:
measureProgressBar() {
this.refs.welcome.measure(this.logProgressBarLayout);
},
logProgressBarLayout(ox, oy, width, height, px, py) {
console.log("ox: " + ox);
console.log("oy: " + oy);
console.log("width: " + width);
console.log("height: " + height);
console.log("px: " + px);
console.log("py: " + py);
}NativeMethodsMixin। আমি যাই করি না কেন, measureসর্বদা সংজ্ঞায়িত। কোন পয়েন্টার?
NativeMethodsMixinফাংশনটি ব্যবহার করার দরকার নেই কেবলমাত্র কয়েকটি উপাদানগুলিতে on উদাহরণস্বরূপ TouchableWithFeedback, পরিমাপের কার্য রয়েছে তবে একটি নিয়মিত Touchableহয় না। আপনি যে ধরণের Viewব্যবহার করছেন তা পরিবর্তন করার চেষ্টা করুন , রেফটি পান এবং পরিমাপের উপাদানটি পাওয়া যায় কিনা তা পরীক্ষা করে দেখুন। আমি এই ভালে হোঁচট খেয়েছি।
আমার জন্য% মাত্রা নির্ধারণ করা আমার পক্ষে কাজ করেছে worked
width:'100%'
ডিভাইসের সম্পূর্ণ দৃশ্যের মাত্রা পেতে কোডটি এখানে।
var windowSize = Dimensions.get("window");
এটি এর মতো ব্যবহার করুন:
width=windowSize.width,heigth=windowSize.width/0.565