React Native 核心概念与基础开发指南
状态与属性管理
在 React Native 中，UI 的更新完全由状态（State）驱动。属性（Props）用于父组件向子组件传递数据，而状态则是组件内部维护的动态数据。
- 严禁直接修改状态（如
this.state.isActive = true），必须通过setState方法触发更新。 setState执行的是浅合并（Shallow Merge），仅更新传入的对象属性，不会覆盖其他状态。- 状态更新是异步的，因此不能依赖当前的
state来立即计算下一个状态。
样式与布局系统
样式定义与应用
推荐使用 StyleSheet.create 来集中管理样式，这有助于提升性能并保持代码整洁。当需要应用多个样式时，可以传入数组，后面的样式会覆盖前面的同名属性。
const themeStyles = StyleSheet.create({
titleText: {
color: '#333333',
fontWeight: '600',
fontSize: 24,
},
highlight: {
color: '#ff5722',
},
});
// 应用单个样式
<Text style={themeStyles.titleText}>Default Title</Text>
// 应用多个样式，highlight 会覆盖 titleText 的 color
<Text style={[themeStyles.titleText, themeStyles.highlight]}>Highlighted Title</Text>尺寸与 Flexbox 布局
React Native 中的尺寸数值默认是无单位的（逻辑像素）。布局系统高度依赖 Flexbox，核心属性包括 flexDirection、justifyContent 和 alignItems。需要注意的是，RN 中 flexDirection 的默认值是 column（垂直方向），这与 Web 端的 row 不同。
<View style={{ width: 120, height: 120, backgroundColor: '#e0f7fa' }} />用户交互与输入
文本输入
TextInput 组件用于接收用户的键盘输入。通过监听 onChangeText 回调，可以实时捕获输入内容的变化并更新到状态中。
<TextInput
style={{ borderWidth: 1, borderColor: '#ccc', padding: 10 }}
placeholder="Enter your search query..."
onChangeText={(query) => this.setState({ searchQuery: query })}
/>触摸与点击事件
对于基础的跨平台按钮，可以直接使用 Button 组件并绑定 onPress 事件。若需要更丰富的点击反馈效果，应使用 Touchable 系列组件，如 TouchableOpacity（透明度反馈）、TouchableHighlight（高亮反馈）等。
列表与滚动容器
基础滚动视图
ScrollView 适合渲染数量较少且固定的内容。它会一次性渲染所有子组件，因此在处理大量数据时会导致严重的性能问题。
高性能长列表
对于长列表数据，必须使用 FlatList。它采用按需渲染机制，只渲染屏幕可见区域的元素。核心属性包括 data（数据源）、renderItem（渲染函数）和 keyExtractor（唯一键生成器）。
<FlatList
data={productList}
keyExtractor={(item) => item.productId.toString()}
renderItem={({ item }) => (
<View style={listStyles.card}>
<Image source={{ uri: item.imageUrl }} style={listStyles.thumbnail} />
<View>
<Text>{item.productName}</Text>
<Text>${item.price}</Text>
</View>
</View>
)}
/>如果数据需要分组显示（如通讯录），则使用 SectionList。它通过 sections 属性接收分组数据，并提供 renderSectionHeader 来渲染分组标题。
<SectionList
sections={[
{ category: 'Fruits', items: ['Apple', 'Banana', 'Cherry'] },
{ category: 'Vegetables', items: ['Carrot', 'Broccoli', 'Spinach'] },
]}
renderItem={({ item }) => <Text style={listStyles.item}>{item}</Text>}
renderSectionHeader={({ section }) => <Text style={listStyles.header}>{section.category}</Text>}
keyExtractor={(item, index) => index.toString()}
/>网络请求与数据获取
React Native 内置了 fetch API 用于处理网络请求。以下是一个发送 POST 请求的示例：
fetch('https://api.example.com/v1/users', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
username: 'dev_user',
role: 'admin',
}),
});在实际项目中，通常会将 fetch 封装为返回 Promise 的通用函数，或者直接引入 axios 等第三方库以简化拦截器和错误处理逻辑。
function executeRequest(endpoint, methodType = 'GET') {
return new Promise((resolve, reject) => {
fetch(endpoint, { method: methodType })
.then(response => response.json())
.then(jsonData => resolve(jsonData))
.catch(error => reject(error));
});
}跨平台适配与设备信息
使用 Platform 模块
通过 Platform 模块，可以针对 iOS 和 Android 编写差异化的代码。
样式差异化：
const adaptiveStyles = StyleSheet.create({
container: {
flex: 1,
...Platform.select({
ios: { paddingTop: 40, backgroundColor: '#f8f9fa' },
android: { paddingTop: 20, backgroundColor: '#ffffff' }
})
}
});组件差异化：
const CustomModal = Platform.select({
ios: () => require('./components/IOSModal'),
android: () => require('./components/AndroidModal'),
})();
// 在渲染中使用
<CustomModal />平台特定的文件扩展名
对于差异极大的组件，可以直接创建带有平台后缀的文件（如 CustomButton.ios.js 和 CustomButton.android.js）。在引入时，打包工具会自动根据当前运行平台选择正确的文件：
import CustomButton from './components/CustomButton';系统版本检测
有时需要针对特定的操作系统版本进行兼容性处理：
// Android 版本检测
if (Platform.OS === 'android' && Platform.Version >= 29) {
console.log('Running on Android 10 or higher');
}
// iOS 版本检测
const iosMajorVersion = parseInt(Platform.Version, 10);
if (Platform.OS === 'ios' && iosMajorVersion < 13) {
console.log('Applying fallback for iOS 12 and below');
}获取屏幕尺寸
使用 Dimensions API 可以动态获取设备的屏幕宽高，常用于响应式布局计算：
const screenWidth = Dimensions.get('window').width;
const screenHeight = Dimensions.get('window').height;