2

我正在为 React-Native 创建一个模块。

该模块需要根据存储在 DB 中的配置突出显示或指出屏幕上的某些元素。

在 Android 中，我们的数据库将包含视图 ID，我们的代码将突出显示这些视图 ID。

在 HTML 中，元素 ID 就足够了。

如何在 React native 中定义唯一标识符。

这些将存储在数据库中，然后实时突出显示。因此模块需要在运行时访问元素的 x、y、宽度和高度

在 HTML 中，我会使用 getElementbyId() 并继续获取它的属性。React Native 中的等价物是什么。

这有效 -

this.userNameRef.measure((width,height,fx,fy,px,py)=>{
        console.log(fx)
        console.log(fy)
})

如果将 userNameRef 作为字符串参数接收，我如何获取此数据

4

2 回答 2

1

首先，请记住，React Native 中的选择与 web 不同。

你不直接选择元素，你必须通过元素的道具来引用。

React Native 中的所有元素都有一个名为 ref 的属性，您将能够访问有关该组件的所有信息，您可以调用方法并获取属性值。

使用类组件的示例：

class MyComponent extends React.Component {

onEndLoadImage = () => {
    console.log(this.flatlist.current); // here have all methods and properties of Image
}

render() {
    return (
        <Image
            ref={element => this.flatlist = element}
            onLoadEnd={onEndLoadImage}
            ...
        />
    );
}

}

使用带有钩子的功能组件的示例：

function MyComponent {
const imageRef = useRef(null);

const onEndLoadImage = () => {
    console.log(imageRef.current); // here have all methods and properties of Image
}

return (
    <Image
        ref={imageRef}
        onLoadEnd={onEndLoadImage}
        ...
    />
);

}

于 2020-08-29T15:51:43.837 回答
0

您可以在所需的 View 上使用 onLayout 道具来获取 React Native 端的视图尺寸。

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

const GetLayout = (props) => {
    const _getLayout = (evt) => {
        const data = evt.nativeEvent;
        alert(JSON.stringify(data));
    }
    return(
        <View style={{flex: 1}}>
            <View style={{flex: 1}} onLayout={_getLayout}> 
                <Text>I am the required View</Text>
            </View>
        </View>
    )
}

export default GetLayout;

const styles = StyleSheet.create({

})
于 2020-10-25T13:25:33.593 回答