React Native跨平台开发入门教程：一套代码构建iOS与Android应用

4.2 Props（属性）

Props是从父组件传递给子组件的参数，是只读的不可变数据[citation:3]。

const Greeting = (props) => {
    return <Text>Hello, {props.name}!</Text>;
};

// 使用
<Greeting name="John" />

4.3 State（状态）

State是组件内部管理的数据，当state变化时组件会重新渲染。React Native中处理state的方式与React Web完全相同[citation:3]。

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

const Counter = () => {
    const [count, setCount] = useState(0);

    return (
        <View>
            <Text>点击次数：{count}</Text>
            <Button 
                title="点击"
                onPress={() => setCount(count + 1)}
            />
        </View>
    );
};

4.4 样式系统

React Native使用JavaScript对象定义样式，通过StyleSheet API创建和管理样式[citation:3][citation:4]。

import {StyleSheet} from 'react-native';

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#f5f5f5'
    },
    text: {
        fontSize: 24,
        color: 'blue'
    }
});

// 使用
<View style={styles.container}>
    <Text style={styles.text}>Styled Text</Text>
</View>

React Native使用Flexbox布局系统，通过flexDirection、justifyContent、alignItems三个属性即可实现复杂布局[citation:4]。

5. 核心组件与布局

5.1 常用核心组件

5.2 Flexbox布局示例

<View style={{
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 16
}}>
    <View style={{flex: 1, backgroundColor: 'red'}}/>
    <View style={{flex: 2, backgroundColor: 'blue'}}/>
    <View style={{flex: 1, backgroundColor: 'green'}}/>
</View>

flex决定组件在主轴上的空间分配比例，flexDirection控制主轴方向（row为水平，column为垂直）[citation:4]。这种布局方式与Android的ConstraintLayout或Jetpack Compose有显著差异，更接近Web的Flexbox。

6. 导航与路由

React Native没有内置导航系统，React Navigation是目前最广泛采用的第三方导航库[citation:4][citation:9]。

安装React Navigation：

npm install @react-navigation/native
npm install @react-navigation/stack
npm install react-native-screens react-native-safe-area-context

栈导航示例：

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {Button, Text, View} from 'react-native';

const HomeScreen = ({navigation}) => (
    <View>
        <Text>首页</Text>
        <Button 
            title="前往详情"
            onPress={() => navigation.navigate('Details')}
        />
    </View>
);

const DetailsScreen = ({navigation}) => (
    <View>
        <Text>详情页</Text>
        <Button title="返回" onPress={() => navigation.goBack()}/>
    </View>
);

const Stack = createStackNavigator();

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

导航传递参数的方式类似于Android的Intent附加信息，通过route.params访问。

7. 列表渲染与FlatList优化

长列表渲染是移动端常见的性能挑战。FlatList组件通过按需渲染（只渲染可见区域的数据）来优化性能[citation:1]。

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

const DATA = [
    {id: '1', title: '项目1'},
    {id: '2', title: '项目2'},
];

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

<FlatList
    data={DATA}
    renderItem={renderItem}
    keyExtractor={item => item.id}
    initialNumToRender={10}
    windowSize={21}
/>

优化要点：[citation:1][citation:4]
- initialNumToRender：控制首屏渲染数量
- keyExtractor：确保列表项唯一标识
- getItemLayout：预计算布局提升滚动性能
- 实现onEndReachedThreshold：优化无限滚动

8. 状态管理方案

对于中大型应用，推荐采用Redux + Redux Toolkit的组合方案[citation:4]：

import {createSlice} from '@reduxjs/toolkit';

const counterSlice = createSlice({
    name: 'counter',
    initialState: {value: 0},
    reducers: {
        increment: state => {state.value += 1},
        decrement: state => {state.value -= 1}
    }
});

export const {increment, decrement} = counterSlice.actions;
export default counterSlice.reducer;

React Navigation 6.x提供Stack Navigator、Tab Navigator、Drawer Navigator三种导航器，建议将导航配置与业务逻辑通过Context API解耦[citation:4]。

9. 热更新与部署

9.1 CodePush热更新

CodePush是微软提供的热更新服务，支持通过JS Bundle动态下发实现功能迭代，无需应用商店审核[citation:4]。

import codePush from 'react-native-code-push';

const codePushOptions = {
    checkFrequency: codePush.CheckFrequency.ON_APP_RESUME,
    installMode: codePush.InstallMode.ON_NEXT_RESTART
};

export default codePush(codePushOptions)(App);

热更新注意事项：区分开发/生产环境配置、控制更新包体积（建议小于2MB）、实现灰度发布策略[citation:4]。

9.2 应用打包

Android打包：

# 生成签名密钥
keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias

# 构建release版本
cd android
./gradlew assembleRelease

iOS打包（macOS）：
通过Xcode → Product → Archive生成IPA文件，上传至App Store Connect。

10. 性能优化要点

1. 避免不必要的渲染[citation:9]

const MyComponent = React.memo(({text}) => {
    return <Text>{text}</Text>;
});

2. 使用FlatList替代ScrollView
ScrollView会一次性渲染所有子组件，FlatList只渲染可见区域。

3. 启用Hermes引擎

# android/gradle.properties
hermesEnabled=true

Hermes是Facebook为React Native开发的JavaScript引擎，可显著提高启动速度和内存效率[citation:9]。

4. 图片优化
使用react-native-fast-image实现图片按需加载和缓存[citation:9]。

11. 常见问题与解决方案

Gradle同步失败

解决：检查JDK版本是否为17，删除android/.gradle目录后重试

Metro端口被占用

# 查看占用端口的进程
netstat -ano | findstr 8081  # Windows
lsof -i :8081                # Mac/Linux
# 终止后重新启动

模拟器无法启动（Windows）

# 启用Windows Hypervisor Platform
bcdedit /set hypervisorlaunchtype auto

环境变量未生效

# 检查ANDROID_HOME是否正确配置
echo $ANDROID_HOME  # 应输出SDK路径
# 确保platform-tools在PATH中
adb --version

12. 总结与学习资源

恭喜你完成了React Native跨平台开发入门教程！你已经掌握了：
✅ 跨平台开发环境搭建（Windows/macOS）
✅ React Native核心组件与Flexbox布局
✅ Props、State、样式系统
✅ React Navigation导航
✅ FlatList高性能列表
✅ 状态管理与热更新
✅ 应用打包与发布

推荐学习资源：
🔹 React Native官方文档：reactnative.dev
🔹 React Navigation官方文档：reactnavigation.org
🔹 国内社区：React Native中文网

最后的建议：React Native的学习曲线比原生开发平缓，但要写出高质量应用仍需深入理解原生模块交互和性能优化。建议先完成一个完整的个人项目（如待办事项应用、新闻阅读器），再逐步挑战复杂场景。善用Flipper调试工具和React DevTools监控组件渲染性能[citation:4][citation:9]。祝你学习顺利！

版权声明：本文为原创教程，欢迎分享转发。