react native TouchableOpacity(点击渐变) TextInput

最新推荐文章于 2024-03-30 14:58:55 发布

转载最新推荐文章于 2024-03-30 14:58:55 发布 · 717 阅读

文章标签：

#react native TouchableOpacity

移动web 同时被 3 个专栏收录

15 篇文章

订阅专栏

webapp

11 篇文章

订阅专栏

react

6 篇文章

订阅专栏

本文介绍了一个使用React Native创建的简单触摸反馈组件示例。该组件通过TouchableOpacity实现，并包含了一个显示文本“哈哈哈”的Text组件及一个用于输入用户名的TextInput组件。此示例展示了如何为触摸事件设置回调函数并实现基本的文本输入功能。

import React,{Component} from 'react';
import {View,Button,Text,TouchableOpacity,TextInput} from 'react-native';

export default class Demo09Component extends Component{

    handlePress(){
        alert('press');
    }   

    render(){
        return <TouchableOpacity onPress={this.handlePress}>
                 <Text>哈哈哈</Text>
                 <TextInput secureTextEntry={true} keyboardType="numeric" placeholder="请输入用户名"></TextInput>
               </TouchableOpacity>
    }
}