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!
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.