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

标签： androidiosreact-nativeexpomobile-application

Answer 1

您需要通过在组件中传递和道具来处理您的TextInputfor ，例如：Focus.jsvalueonChangeTextTextInput

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是你所缺少的。希望这对你有用。