当前位置：首页 > React

react native实现案例

2026-01-27 08:27:19React

React Native 实现案例

React Native 是一个流行的跨平台移动应用开发框架，允许开发者使用 JavaScript 和 React 构建高性能的 iOS 和 Android 应用。以下是一些常见的实现案例和关键方法：

基础项目搭建

使用 React Native CLI 或 Expo 初始化项目。React Native CLI 更适合需要原生代码集成的项目，而 Expo 提供了更简单的开发体验。

npx react-native init MyProject

对于 Expo：

npx create-expo-app MyProject

核心组件使用

React Native 提供了一系列核心组件，如 View、Text、Image、ScrollView 等，用于构建用户界面。

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, React Native!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 20,
    fontWeight: 'bold',
  },
});

export default App;

导航实现

使用 react-navigation 库实现页面导航。安装依赖后，可以配置堆栈导航或底部标签导航。

npm install @react-navigation/native @react-navigation/stack

示例代码：

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

状态管理

使用 React Context 或第三方库如 Redux 管理应用状态。以下是一个简单的 Context 示例：

import React, { createContext, useState } from 'react';

const UserContext = createContext();

const UserProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
};

export { UserContext, UserProvider };

网络请求

使用 fetch 或 axios 进行网络请求。确保处理异步操作和错误。

const fetchData = async () => {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

原生模块集成

对于需要调用原生功能的场景，可以创建自定义原生模块。以下是一个简单的 Android 原生模块示例：

// Android 原生代码
public class CustomModule extends ReactContextBaseJavaModule {
  public CustomModule(ReactApplicationContext reactContext) {
    super(reactContext);
  }

  @Override
  public String getName() {
    return "CustomModule";
  }

  @ReactMethod
  public void showToast(String message) {
    Toast.makeText(getReactApplicationContext(), message, Toast.LENGTH_SHORT).show();
  }
}

在 JavaScript 中调用：

import { NativeModules } from 'react-native';
const { CustomModule } = NativeModules;

CustomModule.showToast('Hello from Native!');

性能优化

使用 FlatList 替代 ScrollView 渲染长列表，避免内存问题。优化图片加载和使用 React.memo 减少不必要的渲染。

const renderItem = ({ item }) => (
  <View style={styles.item}>
    <Text>{item.title}</Text>
  </View>
);

<FlatList
  data={data}
  renderItem={renderItem}
  keyExtractor={item => item.id}
/>