React Native 是 Facebook 推出的一款基于 JavaScript 的移动端开发框架，使用 React Native 可以开发跨平台的原生应用。本文将介绍如何用 React Native 实现一个模仿大众点评的 Demo，并分享一些有深度和学习以及指导意义的内容。
实现思路
要实现一个模仿大众点评的 Demo，我们需要实现以下功能：
- 商家列表展示
- 商家详情展示
- 用户评价展示
- 用户评价添加
- 用户登录注册
为了实现这些功能，我们需要使用一些 React Native 的组件，如 ScrollView、FlatList、Image、TextInput 等。同时，我们还需要使用第三方库来实现一些特定的功能，如 react-navigation 用来实现页面导航、axios 用来进行网络请求等。
下面我们将分别介绍如何完成上述功能。
商家列表展示
商家列表展示需要通过网络请求获取商家列表数据，并使用 FlatList 组件来展示。具体实现流程如下：
- 在 componentDidMount 生命周期中，使用 axios 库发起网络请求来获取商家列表数据。
- 将商家列表数据保存在组件的 state 中。
- 使用 FlatList 组件来展示商家列表数据。
下面是示例代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ----- --------- ------ ---------- - ---- ---------------
------ ----- ---- --------
----- ------------ ------- --------- -
----- - -
------------- ---
-
------------------- -
--------------------------------------- -- -
---------------
------------- ---------
---
---
-
---------- - -- ---- -- -- -
------ -
----- -----------------------------
------ --------- ---- ----------- -- ------------------------ --
----- ---------------------------------
------------------------
------------------------
-------
-------
--
-
-------- -
----- - ------------ - - -----------
------ -
---------
-------------------
------------------ -- --------
----------------------------
--
--
-
-
----- ------ - -------------------
-------------- -
-------------- ------
----------- ---------
-------- ---
------------------ --
------------------ -------
--
---------- -
------ ---
------- ---
------------ ---
--
------------------ -
----- --
--
---
------ ------- -------------商家详情展示
商家详情展示需要通过网络请求获取商家详情数据，并使用 ScrollView 和 Image 组件来展示。具体实现流程如下：
- 在 componentDidMount 生命周期中，使用 axios 库发起网络请求来获取商家详情数据。
- 将商家详情数据保存在组件的 state 中。
- 使用 ScrollView 组件来展示商家详情数据。
下面是示例代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ----- ----------- ------ ---------- - ---- ---------------
------ ----- ---- --------
----- -------------- ------- --------- -
----- - -
--------------- ---
-
------------------- -
----- - ---------- - - -----------
---------------------------------------------------------------------- -- -
---------------
--------------- ---------
---
---
-
-------- -
----- - -------------- - - -----------
------ -
------------
------ --------- ---- --------------------- -- -------------------- --
----- -------------------------------------------------
----------------------------------
-------------
--
-
-
----- ------ - -------------------
------ -
------ -------
------- ----
--
------ -
--------- ---
----------- -------
--------------- ---
--
---
------ ------- ---------------用户评价展示
用户评价展示需要通过网络请求获取用户评价数据，并使用 FlatList 组件来展示。具体实现流程和商家列表展示类似，这里不再赘述。
用户评价添加
用户评价添加需要使用 TextInput、Button 等组件来实现。具体实现流程如下：
- 在组件的 state 中保存用户评价数据。
- 使用 TextInput 组件来让用户输入评价内容，并给评价内容绑定 onChange 事件来保存数据。
- 在 onPress 事件中使用 axios 库发起网络请求向服务器提交评价内容。
下面是示例代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ----- ---------- ------- ---------- - ---- ---------------
------ ----- ---- --------
----- ---------- ------- --------- -
----- - -
-------- ---
-
-------- - -- -- -
----- - ---------- - - -----------
----- - ------- - - -----------
---------------------------------------------------------- - ------- ---------- -- -
--------------------
---
-
-------- -
----- - ------- - - -----------
------ -
----- -------------------------
---------- -------------------- --------------- --------------------- -- --------------- ------- --- --
------- ---------- ----------------------- --
-------
--
-
-
----- ------ - -------------------
---------- -
----- --
-------- ---
--
------ -
------- ---
------------ --
------------ -------
------------- --
------------- ---
--
---
------ ------- -----------用户登录注册
用户登录注册需要使用 TextInput、Button 等组件来实现。具体实现流程如下：
- 在组件的 state 中保存用户输入的数据。
- 使用 TextInput 组件让用户输入手机号、密码等信息，并给输入框绑定 onChange 事件来保存数据。
- 在 onPress 事件中使用 axios 库发起网络请求向服务器提交登录或注册信息。
- 根据服务器返回的结果来判断登录或注册是否成功，并进行相应的跳转或提示。
下面是示例代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ----- ---------- ------- ---------- - ---- ---------------
------ ----- ---- --------
----- ----- ------- --------- -
----- - -
------ ---
--------- ---
-
------- - -- -- -
----- - ---------- - - -----------
----- - ------ -------- - - -----------
------------------------ - ------ -------- ----------- -- -
-- ------------------ -
----------------------------
- ---- -
--------------
-
---
-
---------- - -- -- -
----- - ---------- - - -----------
----- - ------ -------- - - -----------
--------------------------- - ------ -------- ----------- -- -
-- ------------------ -
--------------------
- ---- -
--------------
-
---
-
-------- -
----- - ------ -------- - - -----------
------ -
----- -------------------------
---------- -------------------- ------------- ------------------- -- --------------- ----- --- --
---------- -------------------- ---------------- ---------------------- -- --------------- -------- --- --
------- ---------- ---------------------- --
------- ---------- ------------------------- --
-------
--
-
-
----- ------ - -------------------
---------- -
----- --
-------- ---
--
------ -
------- ---
------------ --
------------ -------
------------- --
------------- ---
--
---
------ ------- ------结语
本文介绍了如何用 React Native 实现一个模仿大众点评的 Demo，并分享了一些有深度和学习以及指导意义的内容。希望本文能够对读者有所启发，有兴趣的读者可以下载源码来尝试实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67831c93935627c90029ec9c
