javascript - React Native - this.setState 不是函数

Question

使用的技术:

• react native
• > React Navigation

问题:

this.setState 不是函数。

代码:

路由器.js

export const Router = TabNavigator({
  ColorPicker: { screen: ColorPicker },
  Palette: { screen: Palette }
});

应用程序.js

assignScreenType = screenType => {
  this.setState({
    currentScreen: screenType
  });
};

class App extends Component {
  render() {
    return (
    <Router
      screenProps={
        { state, updateRed, updateGreen, updateBlue, updateCyan, updateMagenta, updateYellow, updateBlack, calculateCMYK, calculateRGB, convertToHex, assignScreenType, renderSlider, saveColorSelection }
      }
    />
    );
  }
}

export default App;

颜色.js

<Button
  title="Test 1"
  onPress={ () => console.log((this.props.screenProps.assignScreenType))}
/>

<Button
  title="Test 2"
  onPress={ () => this.props.screenProps.assignScreenType('HEXScreen') }
 />

console.log 揭示的内容:

我尝试过的:

• 我已将我的方法移到 class App extends Component 下方和 render () {} 上方。这减轻了 this.setState is not a function 但随后引入了一个新错误:ReferenceError: assignScreenType is not defined。
• 当方法在 class App extends Component 之下和 render () {} 之上时，我尝试在 screenProps 部分传递 assignScreenType使用关键字 this 的代码，例如:...this.assignScreenType 我收到一个新错误 this2.props.screenProps.assignScreenType不是函数，因为该方法现在未定义。
• 我已将我的方法移到 render() {} 下并将该方法定义为常量。这消除了所有错误，但现在实际上没有任何操作发生。
• 我试过使用 constructor super(); 语法。
• 我试过柯里化(Currying)该方法并将其置于 class App extends Component 之上，然后在调用 Colors.js 中的函数时，移除匿名函数包装 () =>
• 我已经通过 Discord 联系了 React Native 社区，但也没有成功。

结果

到目前为止，我尝试过的任何操作都会导致以下错误之一:- this.setState 不是函数- this.props.screenProps.assignScreenType 不是函数- 没有 Action 发生。

我已经在这几个小时了，但我没有运气。我尝试了几种解决方案，尝试询问其他开发人员，还尝试询问 Discord 中的 React Native 社区。我在仅使用 React 时传递 props/state/ethods 没有问题，但尝试通过 React Navigation 传递 props/state/methods 对我不起作用。

Answer 1

您应该在类上定义方法，以便它具有正确的 this 上下文，然后在您的 render 方法中使用 this 引用该方法。分配屏幕类型:

class App extends Component {

  assignScreenType = screenType => {
    this.setState({
      currentScreen: screenType
    });
  };

  render() {
    return (
    <Router
      screenProps={
        { assignScreenType: this.assignScreenType, /* ...your other screenProps */ }
      }
    />
    );
  }
}