作为 ReactJS 开发者如何开始使用 React Native？-js教程-PHP中文网

作为 ReactJS 开发者如何开始使用 React Native？

WBOY

发布： 2024-07-20 09:20:09

转载

543人浏览过

作为 reactjs 开发者如何开始使用 react native？

最近，我在 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 (
    <view>
      <text>hello, neha!</text>
    </view>
  );
};
export default greetingcomponent;

登录后复制

2. 道具和状态

在 react native 中，props 和 state 的工作方式与 reactjs 中相同。要在组件之间进行通信，您将使用 props。要更新值，您将使用状态。

企业网站通用源码1.0

企业网站通用源码是以aspcms作为核心进行开发的asp企业网站源码。企业网站通用源码是一套界面设计非常漂亮的企业网站源码，是2016年下半年的又一力作，适合大部分的企业在制作网站是参考或使用，源码亲测完整可用，没有任何功能限制，程序内核使用的是aspcms，如果有不懂的地方或者有不会用的地方可以搜索aspcms的相关技术问题来解决。网站UI虽然不是特别细腻，但是网站整体格调非常立体，尤其是通观全

查看详情

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() 等。此外，您还可以创建自己的自定义钩子。

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 测试库的粉丝，好消息是您可以使用相同的库在 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 元素。

import react from 'react';
import { view, text } from 'react-native';

const greetingcomponent = () => {
  return (
    <view>
      <text>hello, neha!</text>
    </view>
  );
};
export default greetingcomponent;

登录后复制

快乐学习！！

以上就是作为 ReactJS 开发者如何开始使用 React Native？的详细内容，更多请关注php中文网其它相关文章！