作为 ReactJS 开发人员，如何开始使用 React Native？
最近，我在React Nexus上发表了关于“无障碍功能和电视应用”的演讲。我经常被问到的一个问题是：“作为一名 ReactJS 开发者，开始使用 React Native 有多容易？”
简而言之，对于 ReactJS 开发人员来说，从 React Native 开始很容易。
在这篇博客中，我将分享 ReactJS 的五个概念，ReactJS 开发人员可以在 React Native 中使用。
1. 组件
在 React Native 中，创建组件的方式与在 ReactJS 中类似。概念和最佳实践保持不变。
在下面的代码中，你可以看到 React Native 组件语法与 ReactJS 类似
import React from 'react';
import { View, Text } from 'react-native';
const GreetingComponent = () => {
return (
<View>
<Text>Hello, Neha!</Text>
</View>
);
};
export default GreetingComponent;
2. Props 和 state
在 React Native 中，props 和 state 的工作方式与 ReactJS 相同。组件间通信需要使用 props。更新值需要使用 state。
在下面的 React Native 代码中，我们使用name与 ReactJS 类似的 props。
import React from 'react';
import { View, Text } from 'react-native';
const GreetingComponent = ({ name }) => {
return (
<View>
<Text>Hello, {name}!</Text>
</View>
);
};
export default GreetingComponent;
3. 钩子
就像在 ReactJS 中一样，您可以使用 React Native 中的所有钩子，例如 useState()、useMemo()、useEffect() 等。此外，您还可以创建自己的自定义钩子。
在下面的 React Native 代码中，我们使用了useState()类似 ReactJS 的
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 (
<View style={styles.container}>
<Text>Hello, {name}!</Text>
<Button title="Change Name" onPress={changeName} />
</View>
);
};
export default GreetingComponent;
4.测试
如果您是 React Testing Library 的粉丝，那么好消息是您可以使用相同的库在 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(<GreetingComponent />);
// 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 元素。
在下面的 React Native 代码中，View、 和Text是 React Native 组件。这些组件用于创建应用程序的视图。
import React from 'react';
import { View, Text } from 'react-native';
const GreetingComponent = () => {
return (
<View>
<Text>Hello, Neha!</Text>
</View>
);
};
export default GreetingComponent;
学习愉快！！
文章来源：https://dev.to/hellonehha/how-to-start-with-react-native-as-reactjs-developer-2d61