react-native - 从组件调用主文件中的函数

Question

我最近将我的应用程序从使用类组件重构为功能组件，并且在最后几件事上遇到了问题。

我的Home.js样子如下（简化）：

// imports....
import { StartStopButtons } from "../components/Button";

export default ({ navigation }) => {

  const [scrollEnabled, setScrollEnabled] = useState(false);
  const [elapsedMilliseconds, setElapsedMilliseconds] = useState(0);
  const [isRunning, setIsRunning] = useState(false);
  const [startTime, setStartTime] = useState(false);
  const [stopTime, setStopTime] = useState(false);
  const [isReset, setIsReset] = useState(true);

  start = () => {
    console.log("START");
    // stuff
  };

  reset = () => {
    console.log("RESET");
    // stuff
  };

  stop = () => {
    console.log("STOP");
    // stuff
  };

  return (
    <View style={styles.container}>
        <StartStopButtons
          isRunning={isRunning}
          isReset={isReset}
          elapsedMilliseconds={elapsedMilliseconds}
        />
    </View>
  );
};

MyStartStopButtons有不同的外观，根据当前状态，它要么显示Start，Stop要么Reset调用相应的函数。我目前正在将此情报放在另一个文件中，即我的Button.js文件中。

Button.js：

//imports....

export const StartStopButtons = ({
  isRunning,
  isReset,
  elapsedMilliseconds,
}) => {
  if (isRunning && isReset === false) {
    return (
      <View>
        <TouchableOpacity onPress={stop}>
          <Text>Stop</Text>
        </TouchableOpacity>

        <TouchableOpacity onPress={pause}>
          <Text>Pause</Text>
        </TouchableOpacity>
      </View>
    );
  } else {
    if (elapsedMilliseconds === 0) {
      return (
        <TouchableOpacity onPress={start}>
          <Text>Start</Text>
        </TouchableOpacity>
      );
    } else {
      return (
        <TouchableOpacity onPress={reset}>
          <Text>Reset</Text>
        </TouchableOpacity>
      );
    }
  }
};

在重构之前，我使用,this.state.start来this.state.stop调用位于.startstopHome.js

我现在怎样才能做到这一点？有更好的方法吗？

标签： react-nativereact-functional-component

Answer 1

您可以将函数作为道具传递，就像传递isRunning,isReset和elapsedMilliseconds.

但const也请在函数名称之前添加。

// imports....
import { StartStopButtons } from "../components/Button";

export default ({ navigation }) => {

  const [scrollEnabled, setScrollEnabled] = useState(false);
  const [elapsedMilliseconds, setElapsedMilliseconds] = useState(0);
  const [isRunning, setIsRunning] = useState(false);
  const [startTime, setStartTime] = useState(false);
  const [stopTime, setStopTime] = useState(false);
  const [isReset, setIsReset] = useState(true);

  const start = () => {
    console.log("START");
    // stuff
  };

  const reset = () => {
    console.log("RESET");
    // stuff
  };

  const stop = () => {
    console.log("STOP");
    // stuff
  };

  const pause = () => {};

  return (
    <View style={styles.container}>
        <StartStopButtons
          start={start}
          stop={stop}
          reset={reset}
          pause={pause}
          isRunning={isRunning}
          isReset={isReset}
          elapsedMilliseconds={elapsedMilliseconds}
        />
    </View>
  );
};

并像使用它们一样

//imports....

export const StartStopButtons = ({
  start,
  stop,
  reset,
  pause,
  isRunning,
  isReset,
  elapsedMilliseconds,
}) => {
  if (isRunning && isReset === false) {
    return (
      <View>
        <TouchableOpacity onPress={stop}>
          <Text>Stop</Text>
        </TouchableOpacity>

        <TouchableOpacity onPress={pause}>
          <Text>Pause</Text>
        </TouchableOpacity>
      </View>
    );
  } else {
    if (elapsedMilliseconds === 0) {
      return (
        <TouchableOpacity onPress={start}>
          <Text>Start</Text>
        </TouchableOpacity>
      );
    } else {
      return (
        <TouchableOpacity onPress={reset}>
          <Text>Reset</Text>
        </TouchableOpacity>
      );
    }
  }
};