Skip to main content

React Native组件

Text组件​

<Text>Hello, React Native!</Text>

TextInput组件​

<TextInput
    placeholder="请输入"
    onChangeText={(newText) => setText(newText)}
    value={text}
/>

View组件​

<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text>Hello, React Native!</Text>
</View>

ScrollView组件​

<ScrollView>
    <Text>Item 1</Text>
    <Text>Item 2</Text>
    <Text>Item 3</Text>
    {/* Add more items here */}
</ScrollView>

Slider组件​

<Slider
    value={value}
    onValueChange={(newValue) => setValue(newValue)}
/>

Image组件​

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

VirtualizedList组件​

<VirtualizedList
    data={data}
    renderItem={({ item }) => <Text>{item.value}</Text>}
    keyExtractor={(item) => item.key.toString()}
/>

FlatList组件​

<FlatList
    data={data}
    renderItem={({ item }) => <Text>{item.value}</Text>}
    keyExtractor={(item) => item.key.toString()}
/>

SectionList组件​

<SectionList
    sections={data}
    renderItem={({ item }) => <Text>{item}</Text>}
    renderSectionHeader={({ section }) => <Text>{section.title}</Text>}
    keyExtractor={(item, index) => index.toString()}
/>

Modal组件​

<Modal
    visible={modalVisible}
    animationType="slide"
    transparent={false}
    onRequestClose={() => setModalVisible(false)}
>
    <View>
        <Text>Modal Content</Text>
        <Button title="关闭" onPress={() => setModalVisible(false)} />
    </View>
</Modal>

Button组件​

<Button title="点击" onPress={handlePress} />

StatusBar组件​

<StatusBar barStyle="dark-content" backgroundColor="#ffffff" />

Switch组件​

<Switch
    value={isEnabled}
    onValueChange={toggleSwitch}
/>