最近，我在 React Nexus 上發表了關於「輔助功能和電視應用程式」的演講。我不斷收到的一個問題是：「身為 ReactJS 開發人員，開始使用 React Native 有多容易？」

簡而言之，對於 ReactJS 開發人員來說，從 React Native 開始會很容易。

在這篇部落格中，我將分享 ReactJS 開發人員可以在 React Native 中使用的五件事。

1. 組件

在 React Native 中，您將像在 ReactJS 中那樣建立元件。概念和最佳實踐保持不變。

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

const GreetingComponent = () => {
  return (
    Hello, Neha!
  );
};
export default GreetingComponent;

2. 道具和狀態

在 React Native 中，props 和 state 的工作方式與 ReactJS 中相同。要在組件之間進行通信，您將使用 props。要更新值，您將使用 state.

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

const GreetingComponent = ({ name }) => {
  return (
    Hello, {name}!
  );
};
export default GreetingComponent;

3. 掛鉤

就像在ReactJS中一樣，您可以使用React Native中的所有鉤子，例如useState()、useMemo()、useEffect()等。此外，您還可以建立自己的自訂鉤子。

import React, { useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

const GreetingComponent = () => {
  const [name, setName] = useState('John');

  const changeName = () => {
    setName('Jane');
  };

  return (
    Hello, {name}!
    
  );
};

export default GreetingComponent;

4. 測試

如果您是 React 測試庫的粉絲，好消息是您可以使用相同的程式庫在 React Native 中進行測試。

import React from 'react';
import { render, fireEvent } from '@testing-library/react-native';
import GreetingComponent from './GreetingComponent';

test('it renders correctly and changes name on button press', () => {
  // Render the component
  const { getByText } = render();

  // Assert initial state
  expect(getByText('Hello, John!')).toBeTruthy();

  // Find the button and simulate a press
  const button = getByText('Change Name');
  fireEvent.press(button);

  // Assert that the name has changed
  expect(getByText('Hello, Jane!')).toBeTruthy();
});

5.JSX

在 React Native 中，有一些元件可用於在 JSX 中建立視圖。但是，在 ReactJS 中，您可以使用任何有效的 HTML DOM 元素。

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

const GreetingComponent = () => {
  return (
    Hello, Neha!
  );
};
export default GreetingComponent;

快樂學習！ ！