从 React-Native 中的不同屏幕组件在 App 中调用 function

Question

I'm developing an app for tuning pianos in react-native. I have an App.js and some screens implemented with react-navigation. The question is, how I can call a function in App.js from another Screen component in react-native? I'm missing something of react-native, I searched on the web but I can't find something really useful.

The App.js code:

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

And the Screen component code:

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

Thanks for the answers!

Answer 1

You should be able to pass the props like this

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

Remember to use this.testFunction = this.testFunction.bind(this)

Then in desire Screen you can use props.testFunction() after declaring super(props) in constructor.