[英]React Native - measure component when props recieved
我有一个ScrollView作为我视图的根。 在里面我展示了一堆Text组件。 每个组件都有自己的'ref',因此它们是可访问的。 现在,我正在传递一个带有数字的道具,这个数字告诉我应该滚动到哪个文本。 所以我需要先测量它。 我尝试了这四种方法,但每种方法都只给我未定义的值。 任何人的想法?
componentWillReceiveProps(nextProps) { //this is a reference to my 'Text' component const chapterNo = nextProps.navigation.state.params.chapter; const chapterRef = this.refs["chapter" + chapterNo]; //method 1: var RCTUIManager = require('NativeModules').UIManager; var handle = ReactNative.findNodeHandle(chapterRef); RCTUIManager.measure(handle, (x, y, width, height, pageX, pageY) => { console.log(x, y, width, height); }); //method 2: NativeMethodsMixin.measure.call(chapterRef, (x, y, width, height) => { console.log(x, y, width, height); }); //method 3: chapterRef.measure((ox, oy, width, height, px, py) => { console.log(ox, oy, width, height); }); //method 4 (same as 3 but with setTimout): setTimeout(() => { chapterRef.measure((ox, oy, width, height, px, py) => { console.log(ox, oy, width, height); }); }, 0); }
请看下面的示例
假设你的scrollView的每个项目都有不同的大小(否则它更容易):
我很抱歉,如果不是很清楚,但我相信你会明白的。 我会尽快添加一个例子。
编辑:
class HorizontalNavCustomerFlow extends Component {
state = {
heights: [],
totalHeight: 0,
heightsChecked: 0,
};
componentDidUpdate() {
const { currentParagraph } = this.props; // Id of the paragraph you want to scroll to
// Compute current item position and scroll when all item heights are computed
if (this.state.widthsChecked === HOW_MANY_ITEMS_YOU_HAVE) { // use for example .lenght if you have an array
let yposition = 0;
const screenHeight = Dimensions.get('window').height;
for (let i = 0; i <= currentParagraph; i++) {
yposition += this.state.heights[i];
}
// Removing half of current element
yposition -= this.state.heights[currentParagraph] / 2;
// And half of screen's height
yposition -= screenHeight / 2;
// Last elements
if (yposition > (this.state.totalWidth - screenWidth)) {
yposition = this.state.totalHeight - screenHeight;
}
// Scroll
if (yposition > 0) this.refs.MainScrollView.scrollTo({ y: yposition, animated: false });
}
}
// Render
render() {
return (
<View>
<ScrollView
ref='MainScrollView'
showsVerticalScrollIndicator={false}
>
// ... Your items
<View
onLayout={(object) => {
const { height } = object.nativeEvent.layout;
const newState = this.state;
newState.heights[index] = width;
newState.heightsChecked = this.state.heightsChecked + 1;
newState.totalHeight = this.state.totalHeight + height;
this.setState(newState);
}}
>
<Text>...</Text>
</View>
</ScrollView>
</View>
);
}
}
数组的索引可能会偏离1,具体取决于您是从0还是1开始计算。可以随意调整+/- 1。 此外,我删除了当前项目宽度的一半,因为我想在其中间向右滚动,但如果您想要滚动到开头或此项目或其他内容,请随时更改。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.