react native如何

React Native 基础知识

React Native 是一个由 Facebook 开发的框架，用于使用 JavaScript 和 React 构建跨平台移动应用。它允许开发者编写一次代码，同时在 iOS 和 Android 上运行。

环境搭建

安装 Node.js 和 npm（或 yarn）。使用 Expo CLI 或 React Native CLI 初始化项目。Expo 适合初学者，提供快速开发环境；React Native CLI 提供更多原生模块控制。

npx react-native init ProjectName

或

npx create-expo-app ProjectName

基本组件

React Native 提供了一系列核心组件，如 View、Text、Image、ScrollView 等。这些组件映射到原生平台的 UI 元素。

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

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

样式设计

样式通过 JavaScript 对象定义，使用 StyleSheet.create 方法。样式属性命名采用驼峰式，如 backgroundColor 而不是 background-color。

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

处理用户输入

使用 TouchableOpacity、Button 等组件处理用户交互。状态管理可以使用 React 的 useState 钩子。

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <View>
      <Text>{count}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
    </View>
  );
}

导航

React Navigation 是常用的导航库，支持堆栈导航、标签导航等。安装后可以通过 createStackNavigator 或 createBottomTabNavigator 设置导航结构。

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

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

访问原生功能

通过 React Native 的模块或第三方库访问设备功能，如相机、地理位置等。例如，使用 expo-camera 访问相机。

import { Camera } from 'expo-camera';

function CameraScreen() {
  const [hasPermission, setHasPermission] = useState(null);
  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestPermissionsAsync();
      setHasPermission(status === 'granted');
    })();
  }, []);

  if (hasPermission === null) return <View />;
  if (hasPermission === false) return <Text>No access to camera</Text>;
  return <Camera style={{ flex: 1 }} />;
}

调试与测试

使用 Chrome 开发者工具或 React Native Debugger 调试应用。日志通过 console.log 输出，可在终端或调试工具中查看。测试可以使用 Jest 和 React Native Testing Library。

发布应用

iOS 应用通过 Xcode 打包并提交到 App Store。Android 应用通过生成 APK 或 AAB 文件，上传到 Google Play Store。Expo 提供简化流程，通过 expo publish 发布。

expo build:android
expo build:ios