Блог

Главная - Вопросы по программированию - Реагируйте-Родной при нажатии пользовательской кнопки ничего не происходит, но когда я нажимаю кнопку возврата, это работает

Реагируйте-Родной при нажатии пользовательской кнопки ничего не происходит, но когда я нажимаю кнопку возврата, это работает

#react-native

Вопрос:

При нажатии на компонент круглой кнопки ничего не происходит, но когда я нажимаю кнопку возврата, она работает,

Вот мой пользовательский компонент кнопки

Пользовательская кнопка:

 import React from 'react';
import { Text, View, StyleSheet, TouchableOpacity, } from 'react-native';

export const RoundedButton = ({
  style = {},
  textStyle = {},
  size = 125,
  ...props
}) => {
  return( <TouchableOpacity style={[styles(size).radius,style]}>
  <Text style={[styles(size).text,textStyle]}>{props.title} </Text>
  </TouchableOpacity>);
};

Вызов из компонента:

 import React, {useState} from 'react';
import { Text, View, StyleSheet,TouchableHighlight } from 'react-native';
import {TextInput} from "react-native-paper";
import {RoundedButton} from '../../components/RoundedButton'

export const Focus = ({addSubject}) => {
  const [focusSubject, setFocusSubject] = useState(null);
  const [tempItem, setTempItem] = useState(null);
  return (
    <View style={styles.container}>
    <View style={styles.titleContainer}>
    <Text>Want something?</Text>
    <View  styles={styles.inputContainer} >
    <TextInput onSubmitEditing={({ nativeEvent }) => {
      setTempItem(nativeEvent.text);
addSubject(nativeEvent.text)
    }} />
    <RoundedButton size={100} title=" " onPress={()=> {addSubject(tempItem)}} />
    </View>
    </View>
    </View>
  );
}

Ответ №1:

Вам нужно вызвать onPress на осязаемую область

Пользовательская кнопка:

 import React from 'react';
import { Text, View, StyleSheet, TouchableOpacity, } from 'react-native';

export const RoundedButton = ({
  style = {},
  textStyle = {},
  size = 125,
  ...props
}) => {
  return( 
  <TouchableOpacity onPress={props.onButtonHandler} style={[styles(size).radius,style]}>
  <Text style={[styles(size).text,textStyle]}>{props.title} </Text>
  </TouchableOpacity>
)};

В вашем компоненте передайте onButtonHandler

Вызов из компонента:

 import React, {useState} from 'react';
import { Text, View, StyleSheet,TouchableHighlight } from 'react-native';
import {TextInput} from "react-native-paper";
import {RoundedButton} from '../../components/RoundedButton'

export const Focus = ({addSubject}) => {
  const [focusSubject, setFocusSubject] = useState(null);
  const [tempItem, setTempItem] = useState(null);
  return (
    <View style={styles.container}>
    <View style={styles.titleContainer}>
    <Text>Want something?</Text>
    <View  styles={styles.inputContainer} >
    <TextInput onSubmitEditing={({ nativeEvent }) => {
      setTempItem(nativeEvent.text);
addSubject(nativeEvent.text)
    }} />
    <RoundedButton size={100} title=" " onButtonHandler={()=> {addSubject(tempItem)}} />
    </View>
    </View>
    </View>
  );
}

Комментарии:

1. это еще лучше и рекомендуется в настоящее время использовать нажимной компонент вместо TouchableOpacity .

2. Это зависит от ситуации.. Если вам не нужен какой-либо осязаемый эффект, рекомендуется использовать нажимной, если пользователю нужен какой-либо осязаемый эффект, мы можем использовать осязаемую емкость и т. Д..

3. Это сработало😁 большое спасибо, я довольно долго пытался это исправить

Метки: , ,