说码解字
0%

ReactNative 开发速览

发表于 更新于 分类于 ， Valine：

以下是 React Native 的 基本语法 和 高级特性 整理，涵盖从入门到进阶的内容，帮助开发者快速上手并掌握 React Native 的核心能力。

React Native 使用 JavaScript 和 TypeScript 开发，同时通过与平台相关的原生代码（如 Java、Kotlin、Objective-C、Swift）交互，实现跨平台的移动应用开发。

React Native 开发语言概述

1. JavaScript

  • React Native 的核心开发语言。
  • 基于 React 框架，开发者使用 JSX（JavaScript 和 XML 的结合）编写组件。
  • 示例代码：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    import React from 'react';
    import { View, Text } from 'react-native';

    const App = () => {
      return (
        <View>
          <Text>Hello, React Native!</Text>
        </View>
      );
    };

    export default App;

2. TypeScript

  • TypeScript 是 JavaScript 的超集，增加了静态类型支持。
  • 提高代码可读性和可靠性，适合大型项目。
  • 示例代码：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    import React from 'react';
    import { View, Text } from 'react-native';

    interface Props {
      message: string;
    }

    const App: React.FC<Props> = ({ message }) => {
      return (
        <View>
          <Text>{message}</Text>
        </View>
      );
    };

    export default App;

3. 原生代码（Java、Kotlin、Objective-C、Swift）

React Native 使用原生代码（Java、Kotlin、Objective-C、Swift）实现与平台相关的功能，主要应用于以下场景：

  • 创建自定义 Native Modules 或 Native UI Components。
  • 优化性能或访问设备的底层功能。

Android 原生开发（Java/Kotlin）

  • 使用 Java 或 Kotlin 编写 Android 的原生模块。
  • 示例：定义一个简单的 Toast 模块。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    // MyNativeModule.java
    package com.example;

    import android.widget.Toast;
    import com.facebook.react.bridge.ReactApplicationContext;
    import com.facebook.react.bridge.ReactContextBaseJavaModule;
    import com.facebook.react.bridge.ReactMethod;

    public class MyNativeModule extends ReactContextBaseJavaModule {
        MyNativeModule(ReactApplicationContext context) {
            super(context);
        }

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

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

iOS 原生开发（Objective-C/Swift）

  • 使用 Objective-C 或 Swift 编写 iOS 的原生模块。
  • 示例：定义一个简单的 Toast 模块。
    1
    2
    3
    4
    5
    6
    7
    8
    // MyNativeModule.m
    #import "React/RCTBridgeModule.h"

    @interface RCT_EXTERN_MODULE(MyNativeModule, NSObject)

    RCT_EXTERN_METHOD(showToast:(NSString *)message)

    @end

语言总结

  1. 主要语言: React Native 的核心语言是 JavaScript 和 TypeScript。
  2. 原生语言:
    • Android: Java 或 Kotlin。
    • iOS: Objective-C 或 Swift。
  3. 跨语言交互: React Native 使用 桥接机制（Bridge） 连接 JavaScript 和原生代码，实现跨语言调用和数据传递。

一、React Native 基本语法

1.1 入口文件

React Native 应用的入口通常是 index.js 或 App.js。

1
2
3
4
import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('MyApp', () => App);

1.2 基本组件

React Native 提供了许多内置组件，用于构建界面。

常用组件

组件 描述
View 容器组件
Text 显示文本
Image 显示图片
ScrollView 滚动容器
TextInput 输入框组件
Button 按钮组件
FlatList 高性能列表

组件示例

1
2
3
4
5
6
7
8
9
10
11
12
13
import React from 'react';
import { View, Text, Button } from 'react-native';

const App = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Hello, React Native!</Text>
      <Button title="Click Me" onPress={() => alert('Button Pressed')} />
    </View>
  );
};

export default App;

1.3 样式

React Native 的样式与 CSS 类似，但使用的是 JavaScript 对象。

样式示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const styles = {
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  text: {
    fontSize: 20,
    color: 'blue',
  },
};

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

Flexbox 布局

React Native 使用 Flexbox 定义布局。

  • 主轴方向: 默认是 column（垂直）。
  • 常用属性:
    • flex: 控制子元素的伸缩。
    • justifyContent: 控制主轴上的对齐方式。
    • alignItems: 控制交叉轴上的对齐方式。

1.4 状态和事件

状态管理

React Native 使用 useState 钩子管理状态。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

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

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
    </View>
  );
};

export default App;

事件处理

通过 onPress 等事件属性绑定事件。

1.5 列表渲染

FlatList

高性能列表，适合大量数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React from 'react';
import { FlatList, Text } from 'react-native';

const DATA = [
  { id: '1', title: 'Item 1' },
  { id: '2', title: 'Item 2' },
  { id: '3', title: 'Item 3' },
];

const App = () => {
  return (
    <FlatList
      data={DATA}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => <Text>{item.title}</Text>}
    />
  );
};

export default App;

1.6 路由与导航

React Navigation

React Navigation 是 React Native 的主流导航库。

1
npm install @react-navigation/native react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const HomeScreen = ({ navigation }) => (
  <Button title="Go to Details" onPress={() => navigation.navigate('Details')} />
);

const DetailsScreen = () => <Text>Details Screen</Text>;

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

export default App;

二、React Native 高级特性

2.1 状态管理

Redux

Redux 是一种状态管理工具，适合大型应用。

1
npm install redux react-redux

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// reducer.js
const initialState = { count: 0 };

export default function reducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

// store.js
import { createStore } from 'redux';
import reducer from './reducer';

const store = createStore(reducer);
export default store;

// App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import Counter from './Counter';

const App = () => (
  <Provider store={store}>
    <Counter />
  </Provider>
);

export default App;

// Counter.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

const Counter = () => {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  return (
    <>
      <Text>{count}</Text>
      <Button title="Increment" onPress={() => dispatch({ type: 'INCREMENT' })} />
    </>
  );
};

2.2 本地模块与原生代码

与原生代码交互

通过 Native Modules 与 Android 或 iOS 原生功能集成。

示例：Android Native Module

  1. 创建原生模块（Java）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    public class MyNativeModule extends ReactContextBaseJavaModule {
        public MyNativeModule(ReactApplicationContext reactContext) {
            super(reactContext);
        }

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

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

  2. 在 JavaScript 中调用

    1
    2
    3
    4
    import { NativeModules } from 'react-native';
    const { MyNativeModule } = NativeModules;

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

2.3 性能优化

优化技巧

  1. 避免不必要的重渲染
    • 使用 React.memo 或 shouldComponentUpdate。
  2. 使用 FlatList 或 SectionList
    • 替代 ScrollView 处理大量数据。
  3. 减少内存占用
    • 使用 Image.prefetch 或 react-native-fast-image 加载图片。

2.4 动画

使用 Animated

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import React, { useRef, useEffect } from 'react';
import { Animated, View, Button } from 'react-native';

const App = () => {
  const fadeAnim = useRef(new Animated.Value(0)).current;

  const fadeIn = () => {
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  };

  return (
    <View>
      <Animated.View style={{ opacity: fadeAnim }}>
        <Text>Fading Text</Text>
      </Animated.View>
      <Button title="Fade In" onPress={fadeIn} />
    </View>
  );
};

export default App;

2.5 异步处理

使用 AsyncStorage

1
npm install @react-native-async-storage/async-storage
1
2
3
4
5
6
7
8
9
10
import AsyncStorage from '@react-native-async-storage/async-storage';

const saveData = async () => {
  await AsyncStorage.setItem('key', 'value');
};

const loadData = async () => {
  const value = await AsyncStorage.getItem('key');
  console.log(value);
};

2.6 发布与部署

打包 APK

1
cd android && ./gradlew assembleRelease

打包 iOS

1
cd ios && xcodebuild -scheme MyApp -configuration Release -derivedDataPath build

总结

基础语法

  1. 核心组件：View、Text、Button 等。
  2. Flexbox 布局：通过 `flex

、justifyContent、alignItems构建响应式界面。 3. 路由：通过React Navigation` 管理页面跳转。

高级特性

  1. 状态管理: 使用 Redux、Context API 管理复杂状态。
  2. 性能优化: 通过 FlatList、高效渲染和内存优化提升性能。
  3. 动画: 使用 Animated API 实现平滑动画效果。
  4. 与原生代码集成: 使用 Native Modules 调用 Android 和 iOS 原生功能。
  5. 持久化存储: 使用 AsyncStorage 进行本地数据存储。

掌握这些内容后，你将能够从零开始构建高效的 React Native 应用，并处理复杂的业务需求。