The touchableOpacity component doesn't work and I don't know why

可触摸的Opacity组件不工作，我不知道原因

The First Component App.tsx

第一个组件App.tsx

function App(): JSX.Element {
  const [focuseSubject, setFocusSubject] = useState(null)
  
  return (
    <View style={styles.container}>
      { focuseSubject ? <Text>{focuseSubject} </Text> : <Focus addSubject={setFocusSubject} /> }
      
      <Text style={ {color: 'white'} }>{ focuseSubject }</Text>
    </View>
  );
}

The Second Component Focus.tsx

第二个组件Focus.tsx

function Focus({ addSubject }) {
    const [tempItem, setTempItem] = useState('');
    return (
      <View style={styles.container}>
        <View style={styles.titleContainer}>
          <Text style={styles.title}>What would you lie to focus on?</Text>
          <View style={styles.inputContainer}>
            <TextInput
              style={styles.textInput}
              onSubmitEditing={(event) => {
                setTempItem(event.nativeEvent.text);
              }}
            />
            <RoundedButton
              title="+"
              size={50}
              onPress={() => {
                addSubject(tempItem);
              }}
            />
            {/* <Text>{ tempItem }</Text> */}
          </View>
        </View>
      </View>
    );
}

The Third Component

第三个组成部分

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

if I add onSubmitEditing={addSubject(event.nativeEvent.text)} it works fine but I want to use the button.

如果我添加onSubmitEditing={addSubject(event.nativeEvent.text)}，它可以正常工作，但我想使用按钮。

Note: TouchableOpacity imported from react-native

注意：TouchableOpacity从Reaction-Native导入

You need to pass the onPress props of TouchableOpacity from RoundedButton:

你需要通过RoundedButton的TouchableOpacity的onPress道具：

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

You forgot to put the passed props into the <TouchableOpacity> component.

您忘记将传递的道具放入 组件。

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