Reactnative Touchabble 不透明度不工作react 本机

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

第一个组件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>
  );
}

第二个组件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>
    );
}

第三个组成部分

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

如果我加onSubmitEditing={addSubject(event.nativeEvent.text)}就行了，但我想用这个按钮.

注:TouchableOpacity imported from react-native