核心概念

样式

React Native 使用 JavaScript 对象来定义样式，这些对象类似于 CSS 的语法，但有所不同，如不支持继承。可以使用内联样式或通过 StyleSheet.create() 方法创建样式表，以提高性能。

API 集成

React Native 支持通过 fetch API 或第三方库（如 axios）进行网络请求，以获取服务器端数据并更新 UI。此外，还可以利用本地存储或 SQLite 来存储数据，以离线访问。

本地模块集成

有时候需要使用设备的底层功能（如相机、GPS 等），这需要编写原生模块或利用社区提供的库进行集成。这涉及到一些平台特定代码，需对 Android 和 iOS 的原生开发有基本了解。

示例代码

在使用 React Native 开发应用时，示例代码可以帮助你快速理解和掌握基本概念。以下是一些常用的代码示例，涵盖了 React Native 中的组件、样式和基本交互。

基本组件示例

import React from 'react';
import { View, Text, Button } from 'react-native';
 
const MyFirstComponent = () => {
  return (
    <View>
      <Text>Hello, React Native!</Text>
      <Button
        title="Press me"
        onPress={() => alert('Button pressed!')}
      />
    </View>
  );
};
 
export default MyFirstComponent;

样式示例

在 React Native 中，你可以使用 JavaScript 对象来定义样式。下面是一个简单的样式示例：

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
 
const StyledComponent = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Styled Text</Text>
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
  },
  text: {
    fontSize: 20,
    color: '#333',
  },
});
 
export default StyledComponent;

使用状态管理

React Native 应用中常常需要状态管理。以下是一个使用 useState 钩子的示例：

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
 
const CounterApp = () => {
  const [count, setCount] = useState(0);
 
  return (
    <View>
      <Text>Current Count: {count}</Text>
      <Button
        title="Increase"
        onPress={() => setCount(count + 1)}
      />
      <Button
        title="Decrease"
        onPress={() => setCount(count - 1)}
      />
    </View>
  );
};
 
export default CounterApp;

导航示例

React Navigation 是一个流行的导航解决方案，可以帮助你在多个屏幕之间轻松切换。下面是如何设置简单导航的示例：

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';
 
const Stack = createStackNavigator();
 
function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
 
export default App;

🪴qql1's digital garden

探索

React Native使用指南