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






