从零开始学习React Native开发

Posted 2023-03-27 aikongmeng

从零开始学习React Native开发，使用函数式组件的写法。

1. 环境搭建

首先，你需要在电脑上安装好Node.js和npm。然后，使用npm安装React Native的命令行工具：

npm install -g react-native-cli

接着，创建一个新的React Native项目：

react-native init MyProject

进入项目文件夹，并启动React Native应用程序：

cd MyProject
react-native start

在另一个终端窗口中，运行以下命令来启动应用程序：

react-native run-android

或者

react-native run-ios

这样，你就可以在模拟器或真机上看到一个简单的React Native应用程序了。

2. 创建组件

在项目中创建一个新的文件夹，例如“components”，用于存放你的组件。接着，在该文件夹中创建一个新的文件，例如“MyComponent.js”，用于编写你的第一个React Native组件。

在该文件中，编写以下代码：

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

const MyComponent = (props) => 
  return (
    <View>
      <Text>Hello props.name!</Text>
    </View>
  );


export default MyComponent;

这是一个基本的函数式组件，它接受一个名为“name”的属性，并将其显示在屏幕上。

3. 在应用程序中使用组件

在应用程序的主文件中，例如“App.js”，引入你的组件：

import React from 'react';
import  View  from 'react-native';
import MyComponent from './components/MyComponent';

const App = () => 
  return (
    <View>
      <MyComponent name="React Native" />
    </View>
  );


export default App;

这个文件中，我们引入了刚才创建的组件，并将其放置在一个View组件中。我们还向组件传递了一个名为“name”的属性，值为“React Native”。

4. 运行应用程序

最后，运行应用程序，查看你的组件是否正常工作：

react-native run-android

或者

react-native run-ios

你应该能够在模拟器或真机上看到一个显示“Hello React Native!”的屏幕。

这就是使用函数式组件在React Native中创建和使用组件的基本步骤。你可以继续学习更高级的React Native功能，例如导航、网络请求、状态管理等。