React Native 基础组件

核心组件

最基础的容器组件，类似于 HTML 中的 div。

jsx

import { View } from 'react-native';

<View style={{ flex: 1, backgroundColor: 'white' }}>
  <Text>Hello World</Text>
</View>

用于显示文本的组件。

jsx

import { Text } from 'react-native';

<Text style={{ fontSize: 16, color: 'black' }}>
  Hello React Native
</Text>

用于显示图片的组件。

jsx

import { Image } from 'react-native';

<Image 
  source={{ uri: 'https://example.com/image.jpg' }}
  style={{ width: 200, height: 200 }}
/>

可滚动的容器组件。

jsx

import { ScrollView } from 'react-native';

<ScrollView style={{ flex: 1 }}>
  <Text>Scrollable content</Text>
</ScrollView>

可点击的组件，带有透明度效果。

jsx

import { TouchableOpacity } from 'react-native';

<TouchableOpacity onPress={() => alert('Pressed!')}>
  <Text>Click me</Text>
</TouchableOpacity>