标签: touchableopacity

我希望能够在点击TouchableOpacity按钮后导航到新屏幕,但是我收到一条错误信息

_this3.handleThisTap不是一个函数.(在'_this3.handleThisTap()'中,'_ this3.handleThisTap'未定义)

import React, { Component } from 'react';

import {
  Text,
  StyleSheet,
  View,
  TextInput,
  KeyboardAvoidingView,
  FlatList,
  TouchableOpacity,
  TouchableHighlight,
} from 'react-native';

import {
  SearchBar,
  Wrapper,
  ItemWrapper,
} from './searchView.styles';

export default class SearchView extends Component {

  constructor(props) {
    super(props);
    this.state = {
      feedUrl: 'https://api.urbandictionary.com/v0/autocomplete?term=',
      isLoading: true,
    }
  }

  handleTextChange(text) {
    let url = this.state.feedUrl + text;
    return fetch(url)
      .then((response) => response.json())
      .then((res) => {
        this.setState({
          data: res,
          isLoading: false,
        })
      })
      .catch((error) => {
        console.log(error);
      })
  }

  handleThisTap(item) …

我使用react-native-elements,它们可以很容易地使实际按钮显示为"凸起"或阴影.我想复制一下这个样子TouchableOpacity.

这是一个"凸起按钮"的例子react-native-elements.

它很微妙,但明显产生了很好的影响.你将如何模仿这种效果TouchableOpacity？

是的,我已经完成了文档.如果我错过了什么,请指出......但我认为没有任何事情可以做到这一点.谢谢.

我想在 react native 中更改动态生成的 TouchableOpacity BackgroundColor OnPress。

我的 RN 应用程序中有以下代码。

 <TouchableOpacity
   // onPress={onPress}
   onPressIn={this.handlePressIn}
   onPressOut={this.handlePressOut}
   disabled={disabled}
   style={[
     styles.button,
     buttonStyle,
     this.buttonStyles(),
   ]}
   >
     <Text>Hello</Text>
   </TouchableOpacity> 

我想在按下 TouchableOpacity 时更改其颜色。因此，在 onPressIn 中，我将颜色更改为 darkRed，但它显示浅红色或类似的颜色。那里不能设置深色。这里有什么问题呢？如何更改颜色直到 onPressOut？颜色应该是深色的。

我已经使用 TouchableOpacity 作为我的提交按钮，当我点击提交按钮（TouchableOpacity）填写表单（登录/注册/...）后，键盘隐藏（如果打开），然后我需要再次按下提交按钮然后调用 onPress 方法。

我想要实现的是，如果我单击提交按钮，则无论键盘是否打开，都应调用 onPress() 方法。我必须单击两次才能提交看起来不太好的表单。

另外，我还没有在 IOS、android 上测试过这种行为。

编辑：1

登录屏幕代码 =>

<KeyboardAvoidingView>
   <ScrollView>
    <View style={styles.container}>
    <View style={styles.container_one}>
        <Image
        style={{ height: 100, marginTop: 40 }}
        source={require("../images/logo.png")}
        />
    </View>

    <View style={styles.container_three}>
        <View>
        <View style={styles.container_two}>
            <Text style={styles.text_style_two}>Login</Text>
        </View>

        <View>
            <Text style={styles.text_style_three}>
            Please enter mobile number
            </Text>
            <TextInput
            style={styles.text_input_1}
            autoCapitalize="none"
            keyboardType="numeric"
            onChangeText={text => {
                this.setState({
                username: text
                });
            }}
            value={this.state.username}
            />
        </View>

        <View>
            <Text style={styles.text_style_three}>
            Please enter your password
            </Text>
            <TextInput
            style={styles.text_input_1}
            secureTextEntry={true}
            autoCapitalize="none"
            onChangeText={text => {
                this.setState({
                password: text
                }); …

我遇到了 TouchableHighlight 和 TouchableOpacity 在渲染时做出视觉反应的行为（未调用 onPress）。

有一件事是，当我进入页面并且按钮发出轻微的“闪烁”时，它看起来有点奇怪。这很奇怪，但可以忍受。更令人沮丧的是，如果我改变父组件的状态并因此调用 re-render()，按钮将再次“闪烁”，使得每当我改变状态时所有按钮都会闪烁。

按下按钮会改变页面状态，因此按下按钮会使两个按钮“闪烁”。

我使用react-redux，但这不应该影响这种行为。

下面的代码仅用于说明。

render()
{
    return(
        <View>
            <ToucableHightlight> //Click here changes state
                <Content/>
            </ToucableHightlight>
            <ToucableHightlight>  //Click here changes state
                <Content/>
            </ToucableHightlight>
        <View>
    );
}

我试图找出如何更改React-Native的TouchableOpacity组件的不透明度的体积,这意味着我不喜欢执行印刷时的不透明度的默认值,并且我希望不透明度不那么透明.

根据用于此目的的文档,应使用Animated API:

通过将子项包装在Animated.View中来控制不透明度,Animated.View将添加到视图层次结构中.请注意,这可能会影响布局.

所以,我做到了,这就是它的样子:

<Animated.View style={{ opacity: this.state.opacity._value }}>
    <TouchableOpacity 
        onPress={this.hideKeyboard.bind(this)}
        style={{ opacity: this.state.opacity._value }}
    >
        <Text style={buttonTextStyle}>Cancel</Text>
    </TouchableOpacity>
</Animated.View>

该hideKeyboard方法,正在被调用onPress,调用changeOpacity从内它的方法,这是它的外观:

changeOpacity() {
    Animated.timing(
        this.state.opacity, 
        {
            toValue: this.state.opacity === 1 ? 0 : 1,
            duration: 500
        }
    ).start();
}

this.state.opacity在构造函数中声明:

constructor(props) {
    super(props);
    this.state = { opacity: new Animated.Value(1) };
}

拥有所有这些,行为(不透明度onPress of TouchableOpacity的音量)不会改变,它仍然保持默认.该文档还模糊地介绍了setOpacityTo方法,但由于文档中提供的描述的全面性,我无法弄清楚如何使用它.如何执行不透明度的手动配置？

我遇到了这个问题，我试图确保父母的 onPress 被触发，但它不会

我正在尝试创建一个可以重用的自定义 touchableOpacity 组件，它可以包装其他组件，以便它可以决定是否可以显示子组件，并决定/更改按下子组件时会发生什么。

const CustomTouchable = (children, onPress) => {
   function handleOnPress = () => {
      if(validation){
         onPress();
      }
   }

   return <TouchableOpacity onPress={handleOnPress}>{children}</TouchableOpacity>
}


const MainComponent = () => {
   function onPress = () => {console.log('test')}

    <CustomTouchable onPress={onPress}>
       <TouchableOpacity style={styles.button}>
          <Text>Press Here</Text>
       </TouchableOpacity>
    </CustomTouchable>
}

但是没有触发父onPress，我该如何触发它？

有这个自定义 TouchableOpacity 函数组件，但对于 style prop 我收到了 TS 错误

import { StyleSheet, Pressable, PressableProps, GestureResponderEvent } from 'react-native';\n\nexport default function TouchableOpacity(props: PressableProps) {\n  const { style, onPress, children } = props;\n\n  return (\n    <Pressable\n      onPress={(event: GestureResponderEvent) => {\n        onPress?.(event);\n      }}\n      style={({ pressed }) => [style, pressed ? styles.buttonPressedOpacity : null]}>\n      {children}\n    </Pressable>\n  );\n}\n\nconst styles = StyleSheet.create({\n  buttonPressedOpacity: {\n    opacity: 0.5,\n  },\n});\n

以下是完整的 TS 投诉：

\n

TS2322: 类型 '({ pressable}: PressableStateCallbackType) =>\n(StyleProp | ((state: PressableStateCallbackType) =>\nStyleProp<...>) | { ...; …

我想隐藏注册并使用 的disable属性TouchableOpacity，但它似乎不起作用

 const isInvalid = 
       passwordOne !== passwordTwo || 
       passwordOne === "" || 
       email === "" || 
       username === "";

<TouchableOpacity style={styles.button} disabled={isInvalid}>
   <Text style={styles.buttonText} onPress={this.handleSignUp}>
      Sign up
   </Text>
 </TouchableOpacity>

但注册按钮并未隐藏

我的代码：

import ....

const INITIAL_STATE = {
...
};

export default class Signup extends Component<{}> {

  handleSignUp = () => {
    ...
  };

  render() {

    const isInvalid =
      passwordOne !== passwordTwo ||
      passwordOne === "" ||
      email === "" ||
      username === "";
    return ( …