React学习篇章八

派大星 2021-01-07 React脚手架

# React08

# RN 学习

# 多列布局

// rnc react native component
import React, { Component } from "react";
// 组件或者API使用时,需要提前导入
import { Text, View, FlatList, Dimensions, Image } from "react-native";
// 获取屏幕的宽高
const { height, width } = Dimensions.get("window");
// rpx换算为物理像素  使用方法  例如:30rpx  rpx(30)
const rpx = (x) => (width / 750) * x;
export default class App extends Component {
  // 实现一个加载网络请求获取数据,并显示到页面 需要经过以下步骤：
  // 发送请求  接收数据  存本地  做展示
  // 页面上数据 需要发生改变 一般存储在组件状态中 state
  state = { result: [] };
  // 挂在时触发
  componentDidMount() {
    // 发送请求
    const url = "https://api.apiopen.top/getWangYiNews";
    // 发送请求 JS代码  早期xmlHttpRequest
    // 新的webAPI 建议使用Fetch
    fetch(url)
      .then((res) => res.json())
      .then((data) => {
        console.log(data);
        this.setState({ result: data.result });
      });
  }
  render() {
    return (
      <FlatList
        data={this.state.result}
        keyExtractor={(item, index) => index}
        renderItem={this._renderItem}
        // 列数
        numColumns={2}
        // 每行的样式 多列布局使用
        columnWrapperStyle={{
          justifyContent: "space-evenly",
          marginTop: rpx(10),
        }}
      ></FlatList>
    );
  }
  _renderItem = ({ item }) => (
    // 计算每个元素的宽度 rpx
    // 每个块填充10 两个边 总共4个
    // 750-10*4  710/2
    // 355
    <View style={{ width: rpx(355) }}>
      <Image
        source={{ uri: item.image }}
        style={{ width: "100%", height: rpx(200), borderRadius: rpx(10) }}
      ></Image>
      <Text style={{ fontSize: rpx(30), padding: rpx(10) }}>{item.title}</Text>
    </View>
  );
}

# 实现滚动效果

// rnc
/***
 * 横向滚动展示 通过FlatList实现轮播效果
 *
 *
 */
import React, { Component } from "react";
import { Text, View, Dimensions, FlatList, Image } from "react-native";
// rpx计算
const rpx = (x) => (Dimensions.get("window").width / 750) * x;
export default class App extends Component {
  banners = [
    "http://www.codeboy.com:9999/img/index/banner1.png",
    "http://www.codeboy.com:9999/img/index/banner2.png",
    "http://www.codeboy.com:9999/img/index/banner3.png",
    "http://www.codeboy.com:9999/img/index/banner4.png",
  ];
  // 挂在时触发
  componentDidMount() {
    // 启动一个定时器 实现自动滚动
    setInterval(() => {
      // 下一张
      this.current++;
      // 判断 越界情况 重置为0
      if (this.current == this.banners.length) this.current = 0;
      // 调用FlatList的滚动到指定位置方法
      this.f1.scrollToIndex({ index: this.current });
    }, 2500);
  }
  render() {
    return (
      <FlatList
        data={this.banners}
        keyExtractor={(item, index) => index}
        renderItem={this._renderItem}
        // 横向排列
        horizontal
        // 按页滚动
        pagingEnabled
        // 监控滚动
        onScroll={this._onScroll}
        // ref绑定  需要调用FlatList提供到的方法
        // 当前组件类中 this.f1就代表FlatList组件对象
        ref={(el) => (this.f1 = el)}
      ></FlatList>
    );
  }
  // 默认滚动第一个 下标为0
  current = 0;
  _onScroll = (e) => {
    // RN的事件经过特殊处理,如果打印需要先执行persist
    // e.persist();
    // console.log(e.nativeEvent.contentOffset.x);
    // 滚动过程中 滚动的距离 偏移量
    const offset_x = e.nativeEvent.contentOffset.x;
    // 滚动的位置的宽度
    const w = e.nativeEvent.layoutMeasurement.width;
    // 滚动的偏移量/滚动位置的宽度  计算出滚动的是第几个 第几页
    // console.log(offset_x / w);
    // 后续滚动 是按页滚动的 取整
    this.current = Math.round(offset_x / w);
  };
  _renderItem = ({ item }) => (
    <Image
      source={{ uri: item }}
      style={{ width: rpx(750), height: rpx(300) }}
    ></Image>
  );
}

# ReactNative 路由

react 提供了 router 路由 roact-router-dom

ReactNative 为了能够在移动端有更好的使用体验，专门开发了针对 RN 的路由系统。

官方网址：https://reactnavigation.org/

① 生成几个测试页面

在页面中写入基础结构和识别内容，一定要生成组件结构，否则路由切换报错

import React, { Component } from "react";
import { Text, View } from "react-native";

export default class APage extends Component {
  render() {
    return (
      <View>
        <Text style={{ fontSize: 30 }}> A页面 </Text>
      </View>
    );
  }
}

App.js

// In App.js in a new project

import * as React from "react";
import { View, Text } from "react-native";

// 路由容器
import { NavigationContainer } from "@react-navigation/native";
// 栈式导航
import { createNativeStackNavigator } from "@react-navigation/native-stack";

// 1.引入页面组件
import APage from "./pages/APage";
import BPage from "./pages/BPage";
import CPage from "./pages/CPage";
import DPage from "./pages/DPage";
// 函数组件
function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Home Screen</Text>
    </View>
  );
}

// 创建一个栈式导航
const Stack = createNativeStackNavigator();

// 应用根组件
function App() {
  return (
    // 最外层包裹一个路由容器
    <NavigationContainer>
      {/* 栈式导航 */}
      <Stack.Navigator>
        {/* 组件和路由名称的匹配对应关系 */}
        {/* name 路由名称 */}
        {/* component 组件名称 */}
        {/* 默认加载第一个Stack.Screen */}
        {/* <Stack.Screen name="Home" component={HomeScreen} /> */}
        {/* options 可定制属性 */}
        {/* 参数说明文档:https://reactnavigation.org/docs/native-stack-navigator#options */}
        <Stack.Screen
          name="A"
          component={APage}
          options={{
            headerTitle: "首页",
            headerStyle: { backgroundColor: "orangered" },
            headerTitleStyle: { color: "white" },
          }}
        ></Stack.Screen>
        <Stack.Screen name="B" component={BPage}></Stack.Screen>
        <Stack.Screen name="C" component={CPage}></Stack.Screen>
        <Stack.Screen name="D" component={DPage}></Stack.Screen>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

pages\APage.js

import React, { Component } from "react";
import { Text, View, TouchableOpacity, StyleSheet } from "react-native";

/**
 * 路由会向组件props注入两个属性
 * 1.navigation 包含操作路由的方法  跳转方法
 * 2.route  包含了路由的相关参数
 *
 */

export default class APage extends Component {
  render() {
    // 解构出跳转方法
    const { push } = this.props.navigation;
    // push('路由名称')
    return (
      <View style={{ justifyContent: "center", alignItems: "center" }}>
        <TouchableOpacity
          activeOpacity={0.7}
          style={ss.btn}
          onPress={() => push("B")}
        >
          <Text style={{ fontSize: 30, color: "white" }}>跳转到B页面</Text>
        </TouchableOpacity>
        <TouchableOpacity
          activeOpacity={0.7}
          style={ss.btn}
          onPress={() => push("C")}
        >
          <Text style={{ fontSize: 30, color: "white" }}>跳转到C页面</Text>
        </TouchableOpacity>
        {/* 参数传递  通过push方法的第二个参数 */}
        <TouchableOpacity
          activeOpacity={0.7}
          style={ss.btn}
          onPress={() =>
            push("D", { name: "JavaScript", msg: "JavaScript是React的基础" })
          }
        >
          <Text style={{ fontSize: 30, color: "white" }}>跳转到D页面</Text>
        </TouchableOpacity>
      </View>
    );
  }
}
const ss = StyleSheet.create({
  btn: {
    backgroundColor: "#007acc",
    padding: 10,
    marginTop: 10,
  },
});

pages\DPage.js

import React, { Component } from "react";
import { Text, View } from "react-native";

export default class DPage extends Component {
  // 组件挂在时
  componentDidMount() {
    // 获取路由参数
    // console.log(this.props);
    // const {name, msg} = this.props.route.params;
    // console.log('name:',name);
    // console.log('msg:',msg);
  }
  render() {
    const { name, msg } = this.props.route.params;
    return (
      <View>
        <Text style={{ fontSize: 30 }}> D页面 </Text>
        <Text style={{ fontSize: 30 }}>name:{name}</Text>
        <Text style={{ fontSize: 30 }}>msg:{msg}</Text>
      </View>
    );
  }
}

# 学子商城 App 开发

准备项目包并和模拟器关联，使用之前网盘共享的项目和 APK 即可。

登录页面 LoginPage.js

管理主界面 MainPage.js

商品列表页面 ProductsPage.js

商品详情页面 DetailPage.js

从FTP获取图片资源存储到项目包/assets下

# 路由模块

① 创建页面

创建文件，并在文件中通过rnc代码提示生成结构代码，写标识信息

② 根组件配置路由

import * as React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
// 导入页面
import Login from "./pages/LoginPage";
import Main from "./pages/MainPage";
import Products from "./pages/ProductsPage";
import Detail from "./pages/DetailPage";

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        {/* name 路由名称 componet 组件 options 配置项  titlte 头部导航栏的标题文字*/}
        <Stack.Screen
          name="Login"
          component={Login}
          options={{ title: "管理员登录" }}
        ></Stack.Screen>
        <Stack.Screen
          name="Main"
          component={Main}
          options={{ title: "管理主菜单" }}
        ></Stack.Screen>
        <Stack.Screen
          name="Products"
          component={Products}
          options={{ title: "商品列表" }}
        ></Stack.Screen>
        <Stack.Screen
          name="Detail"
          component={Detail}
          options={{ title: "商品详情" }}
        ></Stack.Screen>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

# 登录页面

分析：

登录功能实现

① 点击按钮后，触发事件处理方法

② 处理方法把用户名和密码发送请求到服务端接口

③ 服务端检验用户名和密码是否正确，返回给客户端。

校验成功跳转路由页面到主菜单页面
校验失败提示用户名或者密码错误

对于登录功能，前端需要做：

传递参数[用户名，密码] 发送给服务端

对于服务端校验后[用户名和密码是否正确]的结果进行处理和提示

拿用户名唯一的，查看到这条数据数据中包含密码字段的值，密码字段的值是经过加密的，需要拿用户输入的密码加密后，进行对比存储的加密字段。

pages\LoginPage.js

import React, { Component } from "react";
import {
  Text,
  View,
  Dimensions,
  TextInput,
  TouchableOpacity,
  Image,
  StyleSheet,
} from "react-native";
// rpx
const rpx = (x) => (Dimensions.get("window").width / 750) * x;
export default class LoginPage extends Component {
  // 初始化用户名uname 密码upwd
  state = { uname: "", upwd: "" };
  // 登录处理方法
  _doLogin = () => {
    // 获取用户名和密码
    const { uname, upwd } = this.state;
    // 登录地址
    const url = "http://www.codeboy.com:9999/data/user/login.php";
    // 参数拼接
    // 测试账号 uname=doudou  upwd=123456
    const body = `uname=${uname}&upwd=${upwd}`;
    // POST请求
    // fetch的参数
    // 第一个参数接口地址
    // 第二个参数
    // method 请求方法 方式  POST
    // headers 头信息
    // body  参数结构
    fetch(url, {
      method: "POST",
      headers: { "Content-type": "application/x-www-form-urlencoded" },
      body,
    })
      .then((res) => res.json())
      .then((res) => {
        console.log(res);
        if (res.code == 200) {
          // alert('登录成功')
          // 跳转到管理主菜单页面
          this.props.navigation.push("Main");
        } else {
          alert("用户名或者密码错误");
        }
      });
  };
  render() {
    // 解构state
    const { uname, upwd } = this.state;
    return (
      <View style={{ padding: rpx(80) }}>
        {/* 用户名 */}
        <TextInput
          style={ss.input}
          placeholder="请输入管理员用户名"
          value={uname}
          onChangeText={(uname) => this.setState({ uname })}
        ></TextInput>
        {/* 密码 */}
        <TextInput
          secureTextEntry
          style={ss.input}
          placeholder="请输入用户登录密码"
          value={upwd}
          onChangeText={(upwd) => this.setState({ upwd })}
        ></TextInput>
        {/* 登录按钮 */}
        <TouchableOpacity
          activeOpacity={0.7}
          style={{
            backgroundColor: "#1390f7",
            paddingVertical: rpx(10),
            borderRadius: rpx(10),
            marginTop: rpx(50),
            alignItems: "center",
          }}
          // 绑定点击事件 触发登录方法
          onPress={this._doLogin}
        >
          <Text
            style={{
              fontSize: rpx(40),
              letterSpacing: rpx(20),
              color: "white",
            }}
          >
            登录
          </Text>
        </TouchableOpacity>
        {/* logo 文字 */}
        <View
          style={{
            marginTop: rpx(100),
            flexDirection: "row",
            justifyContent: "space-evenly",
          }}
        >
          <Image source={require("../assets/logo.png")}></Image>
          <Text style={{ fontSize: rpx(40), color: "#9598a6" }}>
            后台管理系统
          </Text>
        </View>
        {/* 底部版权信息 */}
        <Text
          style={{
            marginTop: rpx(100),
            textAlign: "center",
            fontSize: rpx(30),
            color: "#9598a6",
          }}
        >
          &copy;2017 版权所有,CODEBOY.COM
        </Text>
      </View>
    );
  }
}
const ss = StyleSheet.create({
  input: {
    borderBottomWidth: 1,
    fontSize: rpx(40),
    color: "black",
    padding: rpx(15),
  },
});

# 主菜单界面

页面导航标题右侧有一个小图标
统计数据真实情况数据是接口返回这里需要模拟数据
按钮导航导航的名称图片和跳转路由地址
统计数据和按钮导航的结构布局，是使用 FlatList 高性能的列表组件

pages\MainPage.js

import React, { Component } from "react";
import {
  Text,
  View,
  Dimensions,
  StyleSheet,
  Image,
  TouchableOpacity,
  FlatList,
} from "react-native";
// rpx
const rpx = (x) => (Dimensions.get("window").width / 750) * x;
export default class MainPage extends Component {
  data = [
    // 模拟统计数据
    {
      title: "上架商品总数",
      data: "24380",
      desc: "+128%较上月",
      color: "blue",
    },
    { title: "注册用户总数", data: "1965", desc: "-50%较上月", color: "blue" },
    { title: "下架商品总数", data: "24380", desc: "+128%较上月", color: "red" },
    { title: "当日PC端PV量", data: "14281", desc: "-50%较昨日", color: "red" },
    { title: "移动端PV量", data: "29315", desc: "-34%较昨日", color: "blue" },
    { title: "App总下载量", data: "7422", desc: "+18%较上周", color: "red" },
    // 导航按钮数据
    {
      title: "商品管理",
      icon: require("../assets/menu_product.jpg"),
      target: "Products",
    },
    {
      title: "用户管理",
      icon: require("../assets/menu_user.jpg"),
      target: "Products",
    },
    {
      title: "订单管理",
      icon: require("../assets/menu_order.jpg"),
      target: "Products",
    },
    {
      title: "首页管理",
      icon: require("../assets/menu_refresh.jpg"),
      target: "Main",
    },
  ];
  // 组件挂在时
  componentDidMount() {
    // 解构出配置项  react-navigation reactNative路由 提供了头部导航 及其设置方式
    const { setOptions } = this.props.navigation;
    setOptions({
      // 右侧图标 函数调用返回的是一个JSX结构
      headerRight: () => (
        <TouchableOpacity activeOpacity={0.7}>
          <Image
            source={require("../assets/user.png")}
            style={{
              width: rpx(50),
              height: rpx(50),
              borderRadius: rpx(25),
            }}
          ></Image>
        </TouchableOpacity>
      ),
    });
  }
  render() {
    return (
      <View>
        <FlatList
          data={this.data}
          renderItem={this._renderItem}
          keyExtractor={(item, index) => index}
          numColumns={2}
        ></FlatList>
      </View>
    );
  }
  _renderItem = ({ item, index }) => {
    // 模拟数据data
    // 统计数据
    if (index < 6) {
      return (
        <View style={ss.cell}>
          <Text style={{ fontSize: rpx(30), color: "#666666" }}>
            {item.title}
          </Text>
          <Text
            style={{ color: item.color, fontSize: rpx(30), fontWeight: "bold" }}
          >
            {item.data}
          </Text>
          <Text style={{ fontSize: rpx(28), color: "#666666" }}>
            {item.desc}
          </Text>
        </View>
      );
    }
    // 按钮导航数据
    return (
      <View
        style={{
          width: rpx(375),
          alignItems: "center",
          paddingVertical: rpx(30),
          backgroundColor: "white",
        }}
      >
        <TouchableOpacity
          activeOpacity={0.7}
          // 事件触发的方法不能写() 写括号就立即触发了
          // 使用箭头函数中转以下
          onPress={() => this.props.navigation.push(item.target)}
        >
          <Image
            source={item.icon}
            style={{ width: rpx(120), height: rpx(120) }}
          ></Image>
          <Text style={{ fontSize: rpx(30), textAlign: "center" }}>
            {item.title}
          </Text>
        </TouchableOpacity>
      </View>
    );
  };
}

const ss = StyleSheet.create({
  cell: {
    // 750rpx 分两半 一半是375
    width: rpx(375),
    borderBottomWidth: 1,
    borderRightWidth: 1,
    borderColor: "#666666",
    alignItems: "center",
    paddingVertical: rpx(20),
    backgroundColor: "white",
  },
});

# 商品列表页

分析：

FlatList 列表布局
触底加载
下拉刷新
回到顶部

import React, { Component } from "react";
import {
  Text,
  View,
  FlatList,
  Dimensions,
  Image,
  TouchableOpacity,
} from "react-native";
// rpx rpx(30)代表30rpx
const rpx = (x) => (Dimensions.get("window").width / 750) * x;
export default class ProductsPage extends Component {
  // 发请求  拿数据  存本地  做展示
  state = { res: null };
  url(pno = 1) {
    return "http://www.codeboy.com:9999/data/product/list.php?pno=" + pno;
  }
  componentDidMount() {
    fetch(this.url())
      .then((res) => res.json())
      .then((res) => {
        console.log(res);
        this.setState({ res });
      });
  }
  render() {
    // 判断res接口数据未返回时 不渲染 防止报错
    if (this.state.res == null) return <View></View>;
    return (
      <View style={{ backgroundColor: "white" }}>
        <FlatList
          data={this.state.res.data}
          keyExtractor={(item, index) => index}
          renderItem={this._renderItem}
          ItemSeparatorComponent={this._ItemSeparatorComponent}
          onEndReached={this._onEndReached}
          onEndReachedThreshold={0.1}
        ></FlatList>
      </View>
    );
  }
  // 触底加载数据
  _onEndReached = () => {
    // 解构获取 当前页 最大页
    const { pno, pageCount, data } = this.state.res;
    if (pno == pageCount) return;
    fetch(this.url(pno + 1))
      .then((res) => res.json())
      .then((res) => {
        console.log(res);
        // 数据拼接  拼数组
        res.data = [...data, ...res.data];
        this.setState({ res });
      });
  };
  // 分隔组件
  _ItemSeparatorComponent = () => (
    <View style={{ height: 1, backgroundColor: "#666666" }}></View>
  );
  _renderItem = ({ item }) => (
    <TouchableOpacity
      activeOpacity={0.7}
      style={{ flexDirection: "row", padding: rpx(20) }}
    >
      <Image
        source={{ uri: "http://www.codeboy.com:9999/" + item.pic }}
        style={{ width: rpx(200), height: rpx(200) }}
      ></Image>
      <View style={{ flex: 1, justifyContent: "space-between" }}>
        <Text numberOfLines={2} style={{ fontSize: rpx(35) }}>
          {item.title}
        </Text>
        <Text style={{ fontSize: rpx(38), fontWeight: "bold", color: "red" }}>
          ¥{item.price}
        </Text>
      </View>
    </TouchableOpacity>
  );
}