标签: onpress

我正在开发一个关于本机反应的应用程序。我想在按下文本输入时调用日期选择器，并且在选择日期后它应该显示在文本输入上

我正在 react-native 上构建一个移动应用程序！最近我为每个页面构建了自己的标题组件。这是我的 Header 组件的代码。我在该组件中有两个图标。但不幸的是，这些按钮根本不起作用！！

import React, {Component} from 'react';
import { 
    Text, 
    View, 
    Image, 
  Dimensions,
  TouchableOpacity
} from 'react-native';

import Icon from 'react-native-vector-icons/Ionicons';

import Styles from './Styles';

export default class ChatHead extends Component {
  constructor(props) {
      super(props);

      this.state = {
      }
  }

  render(){
    console.log(this.props.headerText, this.props);
    if(this.props.headerText.length > 16){
      name = this.props.headerText.substr(0, 16);
      name += "..."; 
    }
    else name = this.props.headerText;

    return(
      <View style={Styles.viewStyle}>
        <Text style={Styles.nameStyle}>{name}</Text>

        <TouchableOpacity 
          style={Styles.audioCallButton}
          onPress={() => console.log("Audio Button Pressed")}
        >
          <Icon name={'md-call'} size={25} color="white" align='right'/>
        </TouchableOpacity> …

我有以下flatlist render方法,在点击列表项时,它将调用this._onPress方法:

render() {
      return (
      <TouchableOpacity  onPress={this._onPress} >
        <View style={styles.bookItem} >
          <Image style={styles.cover} source={{uri:this.props.coverURL}}/>
          <View style={styles.info} >
            <Text style={styles.title}>{this.props.title} </Text>
            <Text style={styles.author}>{this.props.author}</Text>
            <Text style={{height: 8}}/>
           </View>
           <View style={styles.rightIcon}>
                <Icon name="chevron-right" size={28} color={'#AAAAAA'} />
          </View>
        </View>
      </TouchableOpacity>
    );
  }

在我在以下代码中添加了swipeout标记后,swipeout可以正常工作,但点击一个项目不再调用this._onPress方法:

 render() {
    // Buttons
    var swipeoutBtns = [
      {
        text: 'Delete',
        onPress: this._buttonPress
      }
    ]
    return (
      <TouchableOpacity  onPress={this._onPress} >
      <Swipeout right={swipeoutBtns} >
        <View style={styles.bookItem} >
          <Image style={styles.cover} source={{uri:this.props.coverURL}}/>
          <View style={styles.info} >
            <Text style={styles.title}>{this.props.title} </Text>
            <Text style={styles.author}>{this.props.author}</Text>
            <Text style={{height: 8}}/> …

我是新来响应本地开发的人。在一个屏幕上的应用程序中，我单击了图像。因此，我在可触摸的不透明度内拍摄了图像，并为该可触摸的不透明度写了onpress方法。但是onpress无法正常工作。但是我已经将相同的代码写到了另一张图像，但是这个正在工作。

这是代码

mport React, {Component} from 'react';
import {Text, View,TouchableHighlight,TouchableOpacity,StyleSheet,StatusBar,Image} from 'react-native';

export default class Profile extends Component {

    static navigationOptions = ({ navigation }) => {
      return {
        title: `Welcome`,
        header: null,
      }
    };

    render() {
      const { state, navigate } = this.props.navigation;
      return (
        <View style={styles.MainContainer}>
        <StatusBar
          barStyle="light-content"
          backgroundColor="#2f5597"
        />
             <View style={{backgroundColor: "#fff",padding: 10}}>
                 <Image source={require('../../app/images/ic_visa.png')} style={{marginLeft: -10}}></Image>
                 <TouchableOpacity  onPress={() => this.backArrow()} style={styles.signoutContainer}> 
                    <Image source={require('../../app/images/ic_Signout.png')} style={styles.signOutImage}></Image>
                 </TouchableOpacity>
             </View>

             <View style={{backgroundColor: "#2f5597",flexDirection: 'row',alignItems: 'center'}}>
                <TouchableOpacity onPress={() => this.backArrow()} style={{padding: …

我正在尝试让 onPress 工作，但没有打印“hi”。事实上，单击文本时应显示在文本后面的灰色默认背景并未显示。如果我用 TouchableHighlight 组件替换嵌套文本，它就会打印。但是，这需要是换行到下一行的连续文本流，因此 TouchableHighlight 不适合。

<Text>   
    <Text>Thanks for visiting the app! Please click </Text>
    <Text onPress={() => { console.log("hi") }}> here right now! </Text>
    <Text>to sign in</Text>
</Text>

实际的代码比上面的稍微复杂一些，但它基本上是一些嵌套在一个较大文本组件中的文本组件（这样文本可以换行到下一行，看起来像一段文本）。关于如何让 onPress 使文本组件正常工作有什么想法吗？谢谢！

它应该是什么样子（粗体文本代表可点击的内容）：

请 立即点击此处
登录。

它不应该是什么样子（不能使用视图作为外部持有者而不是文本）：

Please click here right to sign in. 
             now

我有两个按钮,它们都调用相同的onPress功能.在回调中,我希望能够区分哪个被按下.

<MKRadioButton
   title='A' 
   group={this.radioGroup}
   onPress={this._toggle}
 />

<MKRadioButton
   title='B' 
   group={this.radioGroup}
   onPress={this._toggle}
 />

然后是电话

_toggle(event) {
    //what should go here to figure out if title A or B was called?
}

在下面的代码中，项目正确渲染并可以正常工作，
但是当我按下TouchableOpacity时，它将返回事件。
我使用了JSON.stringify（event.nativeEvent）但没有用

我想获取在TouchableOpacity和该项目Data上设置的键值。

export default class MyLanguages extends Component {
    constructor(props) {
      super(props);
      this.state = {
        languageData: ["English","Hindi","Tamil","Telugu","Gujarati","Marathi","Panjabi"],
      };
    }
    render() {
        return (
            <View style={styles.container}>
                {this.state.languageData.map( (item,index) => {
                    return (
                        <TouchableOpacity key={index}
                            onPress={ (event)=>{
                                alert(event.nativeEvent)
                            }}>
                            <Text style={MyStyle.appFontStyle2}>{item}</Text>
                        </TouchableOpacity>
                    )}
                )}
            </View>
        )
    }
}

我在简单的屏幕底部添加了按钮,每当按下按钮时我都想滚动顶部.什么代码添加到按钮onPress？,请建议任何解决方案,提前谢谢.

I'm using TextInput inside ScrollView and KeyboardAvoidingView but it require two time taps for submit text when keyboard is open.
for soluation i'm add keyboardShouldPersistTaps="always" but it not working.

render() {
    return (
        <View style={{flex: 1}}>
            <KeyboardAvoidingView style={{flex:1}}>
            <ScrollView keyboardShouldPersistTaps="always" 
                contentContainerStyle={{
                    paddingHorizontal: 10,
                    flexGrow : 1,
                    justifyContent : 'center',
                    alignItems:'center'}}>
                <View style={{backgroundColor:'green', width:'100%', borderRadius:8, overflow:'hidden'}}>
                    <TextInput style={{margin:10}}/>
                    <TouchableOpacity onPress={() => {alert('alert')}}>
                        <Text>Submit</Text>
                    </TouchableOpacity>
                </View>
            </ScrollView>
            </KeyboardAvoidingView>
        </View>
    )
}

How to fire on press event on single tap?

我有一个看起来像这样的按钮......

<View style={styles.addToFavoritesStyle}>
  <Button onPress={this.addToFavorites}>ADD TO FAVORITES</Button>
</View>

addToFavorites() {
  ...run some code
}

用户按下按钮后,如何将按钮文本更改为"从收藏中删除",更改按钮样式,并调用其他功能？