• React Native Expo CLI（我使用SDK 44）
• Laravel（我使用了Laravel 7）
• NPM /纱
• 带有域的托管（如果您没有域名和托管，也可以使用本地主机）

全文：-https：//udarax.me/technology/create-a-mobile-crud-crud-application-with-react-native-native-native-expo-and-laravel-api/

作者： - udarax

更多文章： -https://udarax.me/blog/

第01节 - 反应天然

遵循以下所有步骤。

01.创建React本地博览会应用程序

您需要做的第一步是安装新的React本地博览会项目。简单地可以运行博览会初始化创建一个新的博览会应用程序。在运行此命令之前，请确保您已经在计算机上安装和运行React Antive Expo CLI，否则您会遇到一些错误。

点击终端/命令提示符上的以下命令。

博览会初始化

02.在代码编辑器中打开项目

在项目创建过程中，他们询问您需要使用什么模板。在我的情况下，我使用了空白的该项目的模板。创建项目后，导航到项目文件夹中。如果您使用任何命令行，则可以使用CD前端命令。

03.下载并安装Axios

如果您正在使用NPM

NPM安装Axios

或者如果您正在使用纱

纱线添加轴

04.创建用户界面

然后使用您喜欢的代码编辑器打开项目。就我而言，我使用了Visual Studio代码编辑器。然后打开app.js文件 。这是我们要编辑的文件

第一次打开app.js时，您可以看到一些基本标签和样式，如下所示。

从'expo-status-bar'导入{statusbar};
导入{stylesheet，text，view}从“ react-native”中;

导出默认函数应用程序（）{
返回 （

打开app.js以开始处理您的应用！


）；
}const styles = stylesheet.create（{{
容器： {
Flex：1，
背景色：'#fff'，
Alignitems：“中心”，
JustifyContent：“中心”，
}，，
}）;

但这对我们的项目并不重要。因此，删除所有代码。在为应用程序创建UI之前，您必须导入一些库TextInput，触摸可触摸以及文件顶部的其他一些内容。然后按下下面的代码剪辑为我们的应用程序创建UI。

那么您需要导入一些图书馆反应和反应本。

导入React，{usestate}来自“ React”；
进口 {
样式表，
文本，
看法，
可触摸，
textinput，
SafeAreaview
}来自“反应”；

然后像以下那样替换应用程序功能。

导出默认函数应用程序（）{

const [name，setName] = usestate（“”）;
const [age，setage] = usestate（“”）;const setData =（）=> {
//现在把这个空白留
}返回 （


名称
样式= {styles.input}
onChangeText = {setName}
占位符=“输入你的名字”
值= {名称}
/>
年龄
样式= {styles.input}
OnChangeText = {stetage}
值= {age}
占位符=“输入您的年龄”
keyboardType =“数字”
/>
样式= {styles.button}
onpress = {（）=> setData（）}
>
按下这里



）；
}

样式部分应更改以实现我们的UI目标。

const styles = stylesheet.create（{{
容器：{
Paddingvertical：20，
}，，
输入： {
身高：40，
保证金：12，
边界宽：1，
填充：10，
}，，
标签：{
Paddinghorizo​​ntal：15
}，，
按钮：{
宽度：“ 30％”，
身高：40，
背景色：“＃f00”，
Borderradius：20，
textalign：“中心”，
JustifyContent：“中心”，
Alignitems：“中心”，
自行：“中心”
}，，
中心：{
textalign：“中心”，
}，，
buttontext：{
颜色：“＃fff”
}，，
}）;

第02节 - 拉维尔

01.创建Laravel Fresh Project

好吧，此时您已经成功创建了我们的UI。现在我们要创建拉拉维尔支持的API。在这个应用程序中，我使用Laravel 7。但是您可以为此使用任何Laravel版本。

您要做的第一件事是安装Laravel Fresh Project。要这样做，遵循所有步骤。

作曲家创建项目Laravel/Laravel后端7.**

一旦您下载了一个新的项目，就可以在代码编辑器中打开该项目。

02.数据库连接

使用托管创建数据库cpanel或使用您的Localhost。然后打开.env文件和更改数据库凭据如下。

db_connection = mysql
db_host = 127.0.0.1
db_port = 3306
db_database = post1
db_username = root
db_password =

03.迁移模态

然后打开createuserable班级。您可以在数据库>迁移>中找到此内容createuserable并改变向上功能如下。

公共功能UP（）{
schema :: create（'用户'，函数（blueprint $ table）{
$ table-> id（）;
$ table-> string（'name'）;
$ table->字符串（'age'）;
$ table-> string（'email'） - > unique（） - > nullable（）;
$ table-> timestamp（'email_verified_at'） - > nullable（）;
$ table-> string（'password'） - > nullable（）;
$ table-> remameToken（）;
$ table-> timestamps（）;
}）;
}

然后迁移表。为此打开终端或CMD并在命令下运行。

PHP工匠迁移

现在，您可以在数据库上看到类似的打击表。

04.创建一个控制器

现在我们需要创建一个控制器。为此，您可以在终端中运行此命令。然后在编辑器中打开。控制器位于
应用程序> HTTP>控制器> USERCONTROLLER

PHP Artisan Make：Controller UserController

UserController加入后应该看起来像这样。

<？php
名称空间应用\ http \ Controller;使用照明\ http \ request;
使用app \ user;类UserController扩展了控制器
{
公共功能索引（）{
返回用户:: all（）;
}

公共功能显示（$ id）{
返回用户:: find（$ id）;
}公共功能商店（请求$请求）{
返回用户:: create（$ request-> all（））;
}公共功能更新（请求$请求，$ id）{
$ user = user :: findorfail（$ id）;
$ user-> update（$ request-> all（））;
返回$用户；
}公共功能删除（请求$请求，$ id）{
$ user = user :: findorfail（$ id）;
$ user-> delete（）;
返回204;
}
}

然后打开用户模态并修改$填充像这样。要打开这个模态，请遵循此路径。
应用>用户

受保护的$ fillable = [
“名称”，“年龄”，“电子邮件”，“密码”，
];

05.创建Routs

打开api.php档案中的档案。
路线> api.php

路由:: get（'/all'，'userController@index'）;
路由:: get（'/getuser/{id}'，'usercontroller@show'）;
路由:: post（'/users'，'usercontroller@store'）;
路由:: put（'/users/{id}'，'usercontroller@update'）;
路由:: delete（'users/{id}'，'usercontroller@delete'）;

第03节 - 反应本地

这是我们的最后一步。在这里，我们将整合我们的Laravel API到反应天然博览会应用程序。请按照下面的代码执行此操作。

导入{样式表，文本，视图，touchableOpacity，textInput，safeareaview} from'react-native';
导入React，{usestate，useffect}来自“ React”；
从“ Axios”导入Axios；

导出默认函数应用程序（）{const [name，setName] = usestate（“”）;
const [age，setage] = usestate（“”）;
const [用户，setuser] = usestate（[]）;
const [加载，setloading] = usestate（true）;
const setData =（）=> {
axios.post（“ https：// your_domain/api/users”，{
名称：名称，
年龄：年龄，
}）
。然后（（res）=> {
axios（{
方法：“获取”，
URL：'https：// your_domain/api/all'，
}）。然后（（响应）=> {
令apidata = response.data;
console.log（apidata）;
如果（apidata！= 0）{
套索器（apidata）;
setloading（false）;
}别的{
setloading（false）;
}
}）;
}）;
}useseffect（（）=> {
console.log（“ hi”）;
axios（{
方法：“获取”，
URL：'https：// your_domain/api/all'，
}）。然后（（响应）=> {
令apidata = response.data;
console.log（apidata）;
如果（apidata！= 0）{
套索器（apidata）;
setloading（false）;
}别的{
setloading（false）;
}
}）;
}，[加载]）;
返回 （



名称
样式= {styles.input}
onChangeText = {setName}
占位符=“输入你的名字”
值= {名称}
/>
年龄
样式= {styles.input}
OnChangeText = {stetage}
值= {age}
占位符=“输入您的年龄”
keyboardType =“数字”
/>
样式= {styles.button}
onpress = {（）=> setData（）}
>
按下这里



{！加载&&
users.map（（item，index）=> {
返回（

 名称：{item.name} |年龄：{item.age}  

）
}）
}



）；
}const styles = stylesheet.create（{{
容器：{
Paddingvertical：20，
}，，
输入： {
身高：40，
保证金：12，
边界宽：1，
填充：10，
}，，
标签：{
Paddinghorizo​​ntal：15
}，，
按钮：{
宽度：“ 30％”，
身高：40，
背景色：“＃f00”，
Borderradius：20，
textalign：“中心”，
JustifyContent：“中心”，
Alignitems：“中心”，
自行：“中心”
}，，
中心：{
textalign：“中心”，
}，，
buttontext：{
颜色：“＃fff”
}，，
盒子：{
Margintop：20
}，，
textViews：{
TextAlign：“中心”
}，，
}）;

要运行这个项目，请运行博览会开始命令。下一篇文章将很快发布。用户更新和删除将包括在下一篇文章中。