从 React-Native 中的不同 Screen 组件调用 App 中的函数答案

【问题标题】：Calling a function in App from a different Screen component in React-Native从 React-Native 中的不同 Screen 组件调用 App 中的函数
【发布时间】：2021-05-16 08:54:45
【问题描述】：

我正在开发一个应用程序，用于在 react-native 中为钢琴调音。我有一个 App.js 和一些使用 react-navigation 实现的屏幕。问题是，如何从 react-native 中的另一个 Screen 组件调用 App.js 中的函数？我缺少一些 react-native 的东西，我在网上搜索过，但找不到真正有用的东西。

App.js 代码：

export default class App extends Component {

...

testFunction = () => {
  ...
}


render() {
    return (
      <NavigationContainer>
        <Provider store={store}>
          <Tab.Navigator activeColor="#000" barStyle={{           backgroundColor: "white" }}>
            <Tab.Screen
              name="Tuner"
              component={TunerScreen}
              options={{
                tabBarLabel: "Home",
                tabBarIcon: ({ color }) => (
                  <MaterialCommunityIcons name="home" color="black" size={26} />
                ),
              }}
            />

            <Tab.Screen
              name="Beats"
              component={BeatsScreen}
              options={{
                tabBarLabel: "Beats",
                tabBarIcon: ({ color }) => (
                  <MaterialCommunityIcons
                    name="blur-radial"
                    color="black"
                    size={26}
                  />
                ),
              }}
            />

            <Tab.Screen
              name="Inharmonicity"
              component={InharmonicityScreen}
              options={{
                tabBarLabel: "Parameters",
                tabBarIcon: ({ color }) => (
                  <MaterialCommunityIcons name="cog" color="black" size={26} />
                ),
              }}
            />
          </Tab.Navigator>
        </Provider>
      </NavigationContainer>
    );
  }
  
}

以及Screen组件代码：

class TunerScreen extends Component {
  render() {
    return (
      <View style={style.body}>
        ...
        <Button
          style={style.btn}
          onPress={() => testFunction()} //Here i want to call the function
          title="Start"
          color="#841584"
          accessibilityLabel="Start"
        />
      </View>
    );
  }
}

感谢您的回答！

【问题讨论】：

标签： javascript react-native redux react-redux react-navigation

【解决方案1】：

你应该可以像这样传递道具

<Tab.Screen
              name="Inharmonicity"
              component={(props) => <InharmonicityScreen testFunction={this.testFunction} {...props} />}
              options={{
                tabBarLabel: "Parameters",
                tabBarIcon: ({ color }) => (
                  <MaterialCommunityIcons name="cog" color="black" size={26} />
                ),
              }}
            />

记得使用this.testFunction = this.testFunction.bind(this)

然后在desired Screen中你可以在构造函数中声明super(props)后使用props.testFunction()。

【讨论】：