onPress() 不适用于 expo v42.0.0。对圆形按钮使用 TouchableOpacity

Question

我使用了 useState 钩子。 onSubmitEditing 即按下回车命令 setTmpItem 应该运行并且应该在变量 tmpItem 中设置 inputBox 的值。 addSubject prop 传递的也是一个钩子，可以在 2nd code(app.js) 中看到

但是当我按下 RoundedButton 时，它不是控制台记录 1 和 2 并且 addSubject(tmpItem) 也不起作用。

Focus.js 下面

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

export const Focus = ({ addSubject }) => {
  const [tmpItem, setTmpItem] = useState(null);
  return (
    <View style={styles.container}>
      <View>
        <Text> What would you like to focus on? </Text>
        <View>
          <TextInput
            onSubmitEditing={({ nativeEvent: { text } }) => {
              setTmpItem(text);
            }}
          />
          <RoundedButton
            size={50}
            title="+"
            onPress={() => {
              console.log("1");
              addSubject(tmpItem);
              console.log("2");
            }}
          />
        </View>
      </View>
    </View>
  );
};

App.js 下面

//App.js is the central point to glue everything
import React, { useState } from 'react';
import { View, StyleSheet, Text } from 'react-native';
import { Focus } from './src/features/focus/Focus';

export default function App() {
  const [focusSubject, setFocusSubject] = useState(null);
  return (
    <View>
      {focusSubject ? (
        <Text>Where am I going to build a timer</Text>
      ) : (
        <Focus addSubject = {setFocusSubject}/>
      )}
      <Text>{focusSubject}</Text>
    </View>
  );
}

RoundedButton.js 下面

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

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

Answer 1

您需要通过在TextInput 组件中传递value 和onChangeText 属性来处理Focus.js 的TextInput，例如：

export const Focus = ({ addSubject }) => {
  const [tmpItem, setTmpItem] = useState(null);

  const onSubmit = () => {
     //and handle this onSubmit function the way you want to
     //or pass the addSubject props
     addSubject(tmpItem);
  }

  return (
    <View style={styles.container}>
      <View>
        <Text> What would you like to focus on? </Text>
        <View>
          <TextInput
            onChangeText={setTmpItem}
            value={tmpItem}
            onSubmitEditing={() => onSubmit()}
          />
          <RoundedButton
            size={50}
            title="+"
            onPress={() => {
              addSubject(tmpItem);
            }}
          />
        </View>
      </View>
    </View>
  );
};

另外，console.log 在RoundedButton 中不起作用的原因是，您没有将onPress 属性传递给TouchableOpacity 或RoundedButton。在RoundedButton.js 中这样做：

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

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

props.onPress 是您所缺少的。 希望这对你有用。