按下 customButton 时 React-Native 没有任何反应，但是当我按下 return 时它可以工作

Question

按下 RoundButton 组件时没有任何 react ，但是当我按下回车键时，它可以工作，
这是我的自定义按钮组件
自定义按钮 :

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>
  );
}

Answer 1

您需要在 TouchableOpacity 上调用 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>
  );
}