import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
 
const ExampleComponent = () => {
  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,
    color: '#000',
  },
});
 
export default ExampleComponent;

这段代码展示了如何在React Native中创建一个简单的组件,该组件渲染了一个文本元素。它使用了StyleSheet来定义文本和容器视图的样式,这是React Native中处理样式的标准方式。通过这个例子,开发者可以学习到如何组织React Native应用的结构,以及如何使用React Native的基本组件。

React Native 环境搭建和创建新项目启动的步骤概要如下:

  1. 安装Homebrew(如果尚未安装):



/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
  1. 安装Node.js和npm(如果尚未安装):



brew install node
  1. 安装Yarn(Facebook提供的替代npm的工具):



npm install -g yarn
  1. 安装React Native CLI工具:



npm install -g react-native-cli
  1. 创建新的React Native项目:



react-native init AwesomeProject
  1. 进入项目目录:



cd AwesomeProject
  1. 安装项目依赖:



yarn install
  1. 启动Metro Bundler以监视代码更改并实时打包:



npx react-native start
  1. 在另一个终端窗口中,启动iOS模拟器或连接的iOS设备:



open -a Simulator # 仅限Mac用户,启动iOS Simulator
# 或者使用Xcode运行项目
xed -b com.apple.dt.Xcode

在Xcode中,选择相应的模拟器或连接的设备,然后点击“Play”按钮来启动应用。

  1. 运行React Native应用:



react-native run-ios

或者在Xcode中,选择“Product”->“Run”。

注意:确保Xcode和iOS Simulator是最新版本,且已经通过Apple ID登录以使用各种模拟器。如果遇到任何错误,请检查Xcode的控制台输出以获取详细的错误信息,并根据提示进行修复。

报错信息提示为 "Cannot initialize a parameter of type ‘NS" 通常是在开发React Native应用时,遇到了类型不匹配的问题。这可能是因为在Objective-C或Swift代码中传递参数给JavaScript时,类型注解或实际传递的参数类型不正确。

解决方法:

  1. 检查你的Objective-C或Swift代码中的方法签名和JavaScript中的对应方法,确保它们的参数类型匹配。
  2. 如果你在Objective-C中使用TypeScript或Flow,确保你的类型注解是正确的。
  3. 如果你在JavaScript中使用了TypeScript,请确保你的类型定义是正确的,并且没有与原生模块的期望类型不匹配。
  4. 确保你没有在参数中传递不支持的类型,例如自定义的对象类型,它们需要遵循原生模块的序列化和反序列化规则。
  5. 如果问题依然存在,查看相关的文档或搜索这个错误,可能有其他开发者遇到了类似的问题,并有解决方案。

如果报错信息不完整,可能需要查看完整的错误日志来确定确切的原因。通常,错误日志会提供更多的上下文信息,帮助定位问题。

react-native-viewpager 是一个为 React Native 应用程序提供的横向视图滑动切换组件。这个组件可以用来创建类似 ViewPager 的功能,在 Android 中可以用来进行页面的左右滑动切换。

以下是如何使用 react-native-viewpager 的基本示例:

首先,你需要安装这个组件:




npm install react-native-viewpager

然后,你可以在你的 React Native 代码中这样使用它:




import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import ViewPager from 'react-native-viewpager';
 
const MyComponent = () => {
  return (
    <ViewPager style={styles.viewPager}>
      <View style={styles.pageStyle}>
        <Text>Page 1</Text>
      </View>
      <View style={styles.pageStyle}>
        <Text>Page 2</Text>
      </View>
      <View style={styles.pageStyle}>
        <Text>Page 3</Text>
      </View>
    </ViewPager>
  );
};
 
const styles = StyleSheet.create({
  viewPager: {
    flex: 1,
  },
  pageStyle: {
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fff',
  },
});
 
export default MyComponent;

在这个示例中,我们创建了一个 ViewPager,它包含了三个页面,每个页面都可以左右滑动切换。每个页面都有一个文本标签显示页码。这个组件提供了基本的页面滑动功能,但是可能需要额外的样式或者自定义逻辑来满足复杂应用的需求。

React Native 使用 react-navigation 库可以帮助你创建一个美观的应用界面,并管理不同屏幕之间的导航。以下是一个简单的例子,展示如何使用 react-navigation 创建一个带有两个页面的基础应用:

  1. 首先,确保你已经安装了 react-navigation 及其依赖项。如果没有安装,可以使用以下命令安装:



npm install @react-navigation/native
  1. 接下来,你需要安装额外的依赖项,因为 react-navigation 依赖于其他库来处理屏幕转换等功能:



npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
  1. 对于 iOS 开发者,需要执行以下命令来链接原生依赖库:



npx pod-install
  1. 下面是一个简单的使用 react-navigation 创建导航的例子:



import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { View, Text, Button } from 'react-native';
 
// 创建StackNavigator
const Stack = createStackNavigator();
 
// 定义Home和Details页面
function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}
 
function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Button
        title="Go back to Home"
        onPress={() => navigation.goBack()}
      />
    </View>
  );
}
 
// 应用程序的根组件
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

这个例子展示了如何使用 createStackNavigator 创建一个简单的堆栈导航。NavigationContainer 是一个提供导航状态管理的容器,Stack.Navigator 是一个用于创建堆栈导航界面的组件,而 Stack.Screen 定义了堆栈中的每一个屏幕。在每个屏幕中,你可以使用 navigation.navigatenavigation.goBack 来控制屏幕之间的导航。




import React from 'react';
import { Text, TouchableOpacity } from 'react-native';
import RootSibling from 'react-native-root-siblings';
 
// 创建一个覆盖层
export function showOverlay(text, onPress) {
  const sibling = new RootSibling(
    <OverlayBox onPress={onPress}>
      <Text>{text}</Text>
    </OverlayBox>
  );
 
  // 关闭覆盖层的函数
  function hideOverlay() {
    sibling.destroy();
  }
 
  // 返回关闭覆盖层的函数
  return hideOverlay;
}
 
// 覆盖层样式组件
const OverlayBox = ({ children, onPress }) => (
  <TouchableOpacity style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }} onPress={onPress}>
    {children}
  </TouchableOpacity>
);

这段代码定义了一个showOverlay函数,它使用react-native-root-siblings库创建一个全屏覆盖层,并返回一个用于关闭该覆盖层的函数。覆盖层可以接受文本内容和点击事件处理函数作为参数,并在点击时执行这些处理函数。这是一个简单的例子,展示了如何使用React Native创建和管理覆盖层。

React Native 0.72 版本带来了许多更新,这里列举一些主要的更新点:

  1. 支持Android 11 (API 30): 对Android 11的支持,包括新的系统API和权限变化。
  2. iOS 支持: 更新了iOS平台的组件以支持最新的iOS版本。
  3. JavaScript 运行时升级: 将JavaScriptCore升级到最新稳定版本,以提高性能和稳定性。
  4. 新的Text 组件: 引入了一个新的Text组件来替代原有的TextInput组件,用于显示纯文本,并支持多种格式化选项。
  5. 引入新的导航库: 引入了react-navigation库作为默认的导航解决方案。
  6. 更新了Linking API: 更新了Linking API,提供了更简单的deep linking支持。
  7. 更新了Android 模拟器的支持: 改进了对Android模拟器的支持,包括更好的性能和对最新设备的支持。
  8. 其他更新: 包括对TypeScript的更好支持,对Metro Bundler的性能改进,以及其他一些性能提升和bug修复。

以下是一个简单的React Native项目中使用新Text组件的例子:




import React from 'react';
import { Text } from 'react-native';
 
const App = () => (
  <Text style={{ color: 'blue', fontSize: 20 }}>Hello, React Native!</Text>
);
 
export default App;

这段代码演示了如何在React Native应用中使用新的Text组件来显示蓝色的、大小为20的文本。




import React from 'react';
import { View, StyleSheet } from 'react-native';
import QRCode from 'react-native-qrcode-styled';
 
const App = () => {
  return (
    <View style={styles.container}>
      <QRCode
        value="https://www.example.com"
        backgroundColor="#ffffff"
        color="#000000"
        size={200}
        logo={require('./logo.png')}
        logoSize={72}
        logoBackgroundColor="#ffffff"
        logoBorderColor="#000000"
        borderWidth={2}
        imageConfig={{
          excludeFromHash: true,
          maskColor: "#000000",
        }}
      />
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});
 
export default App;

这段代码演示了如何使用react-native-qrcode-styled库来创建一个带有Logo的二维码,并且可以自定义二维码的颜色、大小、边框宽度以及Logo的样式。同时,代码中包含了样式的定义,以确保组件在不同平台上的一致表现。

以下是React Native BLE PLX Demo中的核心函数,展示了如何初始化蓝牙适配器,以及如何扫描和连接到BLE设备。




import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import bleplx from 'react-native-ble-plx';
 
const App = () => {
  const [scanning, setScanning] = useState(false);
  const [devices, setDevices] = useState([]);
  const ble = bleplx.default;
 
  useEffect(() => {
    const initBle = async () => {
      await ble.initialize();
      console.log('BLE Initialized');
    };
    initBle();
  }, []);
 
  const startScan = async () => {
    setScanning(true);
    const scan = await ble.scan([], true);
 
    scan.on('discover', device => {
      console.log(device);
      setDevices(devices => [...devices, device]);
    });
 
    scan.on('end', () => {
      console.log('Scan end');
      setScanning(false);
    });
  };
 
  const stopScan = async () => {
    setScanning(false);
    await ble.stopScan();
  };
 
  return (
    <View style={styles.container}>
      <Text>Bluetooth Low Energy Plugin Example</Text>
      <Button title="Scan" onPress={startScan} disabled={scanning} />
      <Button title="Stop" onPress={stopScan} disabled={!scanning} />
      <Text>Devices found: {devices.length}</Text>
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});
 
export default App;

这段代码展示了如何在React Native应用中使用react-native-ble-plx库进行蓝牙低能耗(BLE)扫描和设备发现。代码中定义了一个React组件,其中包含初始化蓝牙适配器、开始和停止扫描的逻辑,以及如何处理扫描到的设备信息。这为开发者提供了一个实践的蓝牙低能耗通信的例子。

在React Native中,你可以通过创建一个自定义的原生模块来实现JavaScript调用原生方法。以下是一个简单的例子:

  1. 在原生代码中定义一个模块。



// 对于Android(Java)
public class MyNativeModule extends ReactContextBaseJavaModule {
 
    private ReactContext mContext;
 
    MyNativeModule(ReactApplicationContext context) {
        super(context);
        mContext = context;
    }
 
    @Override
    public String getName() {
        return "MyNativeModule";
    }
 
    @ReactMethod
    public void nativeMethod(String message, Promise promise) {
        // 实现你的原生逻辑
        promise.resolve(message);
    }
}



// 对于iOS (Swift)
@objc(MyNativeModule)
class MyNativeModule: RCTEventEmitter {
 
  @objc func nativeMethod(message: String, responseCallback: RCTResponseSenderBlock) {
    // 实现你的原生逻辑
    responseCallback([message])
  }
  
  override func supportedEvents() -> [String]! {
    return ["MyEvent"]
  }
  
  override static func requiresMainQueueSetup() -> Bool {
    return true
  }
}
  1. 注册模块。



// 对于Android
public class MyReactPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new MyNativeModule(reactContext));
        return modules;
    }
 
    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}



// 对于iOS
@objc(MyNativeModuleManager)
class MyNativeModuleManager: RCTViewManager {
  override func view() -> UIView? {
    return nil
  }
  
  override func moduleName() -> String! {
    return "MyNativeModule"
  }
}
  1. 在应用的Java/Kotlin或者Objective-C/Swift代码中注册该模块。



// 对于Android
@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new MyReactPackage() // 注册你的包
    );
}



// 对于iOS
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    let bridge = RCTBridge(delegate: self, launchOptions: launchOptions)
    let rootView = RCTRootView(bridge: bridge, moduleName: "YourAppName", initialProperties: nil)
    ...
}
 
func sourceURLForBridge(_ bridge: RCTBridge!) -> URL! {
#if DEBUG
    return RCTBundleURLProvider.sharedSettings().