React Native 入门实战：样式、状态管理与网络请求全解析 （二）

引言

React Native 作为跨平台移动应用开发框架，凭借其高效的开发体验和接近原生的性能，受到了越来越多开发者的青睐。今天我们将深入探讨 React Native 中的样式编写、状态管理和网络请求等核心概念，并通过实战项目加深理解。

1. React Native 样式编写指南

必须使用 StyleSheet.create

在 React Native 中，样式书写有严格的规范。首先，我们必须使用 StyleSheet.create 来创建样式对象，这不仅能提高性能，还能在开发早期发现样式错误。

import { StyleSheet, Text, View } from 'react-native'

export default function App() {
  return (
    <View style={styles.container}>
      <View>
        <Text style={[{ fontSize: 50, width: 200 }, styles.title]}>
          欢迎来到 React Native 课程!
        </Text>
      </View>
      <View>
        <Text style={{ fontSize: 22, fontWeight: 'bold', color: '#ff7f6f' }}>
          Hello React Native!
        </Text>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  },
  title: {
    fontSize: 22,
    fontWeight: 'bold',
    color: '#e29447'
  }
})

样式书写要点：

• 必须使用驼峰命名法（如 fontSize 而非 font-size）
• 默认使用 Flex 布局，且方向为 flexDirection: column
• 数值不需要单位，直接写数字即可
• 字符串值需要用引号包裹
• 支持样式数组，后面的样式会覆盖前面的同名样式

2. Hook 核心：useState 状态管理

Hook 是 React 16.8 引入的革命性特性，它让函数组件也能拥有状态和生命周期。最常用的 Hook 就是 useState。

import { useState } from 'react'
import { View, Text, Button } from 'react-native'

export default function CounterApp() {
  const [count, setCount] = useState(0)
  
  return (
    <View>
      <Text>一共点击了 {count} 次</Text>
      <Button
        title="点击增加"
        onPress={() => setCount(count + 1)}
      />
    </View>
  )
}

useState 返回一个数组，第一个元素是当前状态值，第二个元素是更新状态的函数。通过解构赋值，我们可以轻松使用它们。

3. 数据遍历与动态渲染

在实际开发中，我们经常需要渲染列表数据。React Native 中使用 map 方法可以轻松实现：

export default function CourseList() {
  const [courses, setCourses] = useState([])
  
  return (
    <View>
      {courses.map((course) => (
        <Text key={course.id}>
          {course.name}
        </Text>
      ))}
    </View>
  )
}

重要提示： 遍历列表时，必须为每个元素提供唯一的 key 属性，这有助于 React Native 高效更新列表。

4. 项目实战：连接真实后端接口

环境搭建

首先确保你的后端项目与 React Native 项目在同一目录下：

# 安装后端依赖
npm i
# 生成 Prisma 客户端
npx prisma generate
# 启动后端服务
npm start

查看数据库内容：

npx prisma studio

5. 网络请求实战

5.1 使用 Fetch API 获取数据

React Native 内置了 Fetch API，我们可以直接使用它来发起网络请求：

export default function DataFetcher() {
  const [courses, setCourses] = useState([])
  
  const fetchData = async () => {
    try {
      const res = await fetch('http://localhost:3000/search')
      const { data } = await res.json()
      setCourses(data.course)
    } catch (error) {
      console.error('请求失败:', error)
    }
  }
  
  return (
    <View>
      <Button title='获取课程' onPress={fetchData}/>
      {courses.map(course => (
        <Text key={course.id}>{course.name}</Text>
      ))}
    </View>
  )
}

5.2 开发环境调试技巧

在开发过程中，需要注意以下几点：

• 手机调试：确保手机和电脑在同一 WiFi 网络下
• 接口地址：手机端请求需要使用电脑的 IP 地址而非 localhost
• 错误处理：务必添加 try-catch 块处理网络错误

6. Hook 进阶：useEffect 自动执行

useEffect 是处理副作用的 Hook，非常适合在组件挂载后自动执行数据获取：

import { useEffect, useState } from 'react'

export default function AutoFetchComponent() {
  const [courses, setCourses] = useState([])
  
  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch('http://localhost:3000/search')
      const { data } = await res.json()
      setCourses(data.course)
    }
    
    fetchData()
  }, []) // 空依赖数组表示只在组件挂载时执行一次
  
  return (
    // 渲染逻辑
  )
}

useEffect 使用场景：

• 无依赖数组：每次组件渲染后都会执行
• 空依赖数组：仅在组件挂载后执行一次
• 有依赖项：依赖项变化时重新执行
• 返回清理函数：在组件卸载前或下次执行前清理资源

7. 实战：实现智能搜索功能

结合以上知识，我们来实现一个带有搜索功能的课程列表：

import { useState, useEffect } from 'react'
import { View, Text, TextInput, FlatList } from 'react-native'

export default function SearchCourse() {
  const [keyword, setKeyword] = useState('')
  const [courses, setCourses] = useState([])
  
  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch(`http://localhost:3000/search?q=${keyword}`)
        const { data } = await res.json()
        setCourses(data.course || [])
      } catch (error) {
        console.error('搜索失败:', error)
      }
    }
    
    // 添加防抖，避免频繁请求
    const timeoutId = setTimeout(fetchData, 300)
    return () => clearTimeout(timeoutId)
  }, [keyword])
  
  return (
    <View style={{ padding: 20 }}>
      <TextInput 
        style={{
          height: 40,
          borderColor: 'gray',
          borderWidth: 1,
          marginBottom: 20,
          paddingHorizontal: 10
        }}
        placeholder="请输入要搜索的课程"
        onChangeText={text => setKeyword(text)}
        defaultValue={keyword}
      />
      
      <FlatList
        data={courses}
        keyExtractor={item => item.id.toString()}
        renderItem={({ item }) => (
          <Text style={{ padding: 10, borderBottomWidth: 1 }}>
            {item.name}
          </Text>
        )}
      />
    </View>
  )
}

这时候可以在expo终端当中按j查看终端情况，让我们来看看页面当中的效果把。

功能亮点：

• 实时搜索：输入关键词时自动触发搜索
• 防抖优化：避免输入每个字符都发起请求
• 错误处理：网络请求失败时友好处理
• 列表优化 ：使用 FlatList 高性能渲染长列表

总结

1. 样式编写 ：遵循 React Native 的样式规范，使用 StyleSheet.create 提高性能
2. 状态管理 ：使用 useState 管理组件状态，实现交互功能
3. 数据渲染 ：通过 map 方法动态渲染列表数据
4. 网络请求：使用 Fetch API 与后端接口交互
5. 副作用处理 ：利用 useEffect 在适当时机执行数据获取

React Native 的学习曲线相对平缓，特别是对于有 React 基础的开发者。掌握这些核心概念后，你已经具备了开发基本 React Native 应用的能力。下一步可以探索导航、动画、原生模块等进阶主题。