Question

我是新来回应本地人并想问一些问题。首先抱歉，如果他们是愚蠢的。：（

我一直在观看并尝试通过一些视频课程学习反应原生语，我发现了https://blog.expo.io/introducing-expo-ar-mobile-augmented-reality-with-javascript-powered-by-arkit-b0d5a02ff23 我正在冲浪时引导。我复制并粘贴了代码，并尝试通过删除一些行来了解它们正在做什么。当我删除＆＃34; ref＆＃34;线路相机没有工作。我实际上无法理解为什么会这样。所以决定在这里问一下。在询问时，我认为提出其他问题会很好。以下是问题：

什么是ref以及何时使用它以及何时不使用？

什么是构造函数以及何时使用它以及何时不使用它？

感谢您的回答！

代码是：

`
import Expo from 'expo';
import React from 'react';

import * as THREE from 'three'; // 0.87.1
import ExpoTHREE from 'expo-three'; // 2.0.2

console.disableYellowBox = true;

export default class App extends React.Component {
  render() {
    return (
      <Expo.GLView
        ref={(ref) => this._glView = ref}
        style={{ flex: 1 }}
        onContextCreate={this._onGLContextCreate}
      />
    );
  }

  _onGLContextCreate = async (gl) => {
    const width = gl.drawingBufferWidth;
    const height = gl.drawingBufferHeight;

    const arSession = await this._glView.startARSessionAsync();

    const scene = new THREE.Scene();
    const camera = ExpoTHREE.createARCamera(arSession, width, height, 0.01, 1000);
    const renderer = ExpoTHREE.createRenderer({ gl });
    renderer.setSize(gl.drawingBufferWidth, gl.drawingBufferHeight);

    scene.background = ExpoTHREE.createARBackgroundTexture(arSession, renderer);

    // Edit the box dimensions here and see changes immediately!
    const geometry = new THREE.BoxGeometry(0.07, 0.07, 0.07);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    cube.position.z = -0.4;
    scene.add(cube);

    const animate = () => {
      requestAnimationFrame(animate);

      cube.rotation.x += 0.07;
      cube.rotation.y += 0.04;

      renderer.render(scene, camera);
      gl.endFrameEXP();
    }
    animate();
  }
}
`

Answer 1

（1）ref用于保存对组件的引用，因此可以从其他组件访问。

作为简化示例，请考虑登录页面。当用户在键入电子邮件后按Enter键时，他/她可能希望继续输入密码。为此，您需要引用密码TextInput组件

          <TextInput
            autoFocus
            keyboardType="email-address"
            autoCapitalize="none"
            returnKeyType="next"
            onChangeText={t => this.setState({ email: t })}
            onSubmitEditing={(event) => {
              this.passwordTextInput.focus();
            }}
          />

          <TextInput
            secureTextEntry
            autoCapitalize="none"
            returnKeyType="done"
            onChangeText={t => this.setState({ password: t })}
            ref={(c) => { this.passwordTextInput = c; }}
            onSubmitEditing={(event) => {
              this.signIn();
            }}
          />

所以基本上如果你不需要访问该组件，那么就没有必要指定ref。

（2）构造函数，顾名思义，是组件对象的对象构造函数。它用于初始化状态。请参考the doc of react.js;反应原生的情况也是如此。

希望它有所帮助。

React Native引用和构造函数

1 个答案: