如何在不创建新的类实例的情况下从另一个类调用我的非静态函数? - 反应本机路由器通量

Question

>我在路由器文件中渲染一个右栏按钮，当点击它时，我想从另一个保存数据的类调用一个函数。它不能是静态方法，因为它需要访问"this"属性。如果我声明该类的新实例，它将没有正确的数据。那我应该怎么做呢？

导航屏幕：

import React from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
import { Router, Scene, Actions } from 'react-native-router-flux';
import NewUserScreen from './NewUserScreen';
import AddMealScreen from './AddMealScreen';
export default function App() {
return (
<Router>
<Scene key="root">
<Scene key="newUser"
component={NewUserScreen}
title="App"
initial
/>
<Scene
key="addMeal"
component={AddMealScreen}
title="Add Meal"
renderRightButton={() =>(
<View>
<TouchableOpacity onPress={() => AddMealScreen.saveMeal()}>
<Text>Add</Text>
</TouchableOpacity>
</View>
)}
/>
</Scene>
</Router>
);
}

添加餐屏：

export default class AddMealScreen extends Component {
constructor() {
super();
this.state={
mealText: '',
}
}
render() {
return (
<View style={styles.container}>
<TextInput style = {styles.mealTextField} 
placeholder = "Meal"
onChangeText={(mealText) => this.setState({mealText})}
/>
</View>
);
}
saveMeal = async () => {
await data.saveString('meal', this.state.mealText)
await data.getStringData('meal');
}

Answer 1

您可以使用ref调用子组件函数

您正在使用功能组件，因此，您必须使用useRef钩

子法典：

导航屏幕：

import React, { Component, useRef } from "react";
export default function App() {
const _AddMealScreen = useRef();
return (
<Router>
<Scene key="root">
<Scene key="newUser" component={NewUserScreen} title="App" initial />
<Scene
initial
key="addMeal"
component={() => <AddMealScreen ref={_AddMealScreen} />}
title="Add Meal"
renderRightButton={() => (
<View>
<TouchableOpacity
onPress={() => _AddMealScreen.current.saveMeal()}
>
<Text>Add</Text>
</TouchableOpacity>
</View>
)}
/>
</Scene>
</Router>
);
}

Answer 2

正如你所说，因为它使用this它不能是一个静态方法，但不仅如此，因为它使用this你不仅需要一个实例，而且你严格需要渲染的实例。你可以通过ref来实现它。

export default class App extends React.Component {
render() {
return (
<Router>
<Scene key="root">
<Scene key="newUser" component={NewUserScreen} title="App" initial />
<Scene
key="addMeal"
title="Add Meal"
renderRightButton={() =>(
<View>
<TouchableOpacity onPress={() => this.mealScreen.saveMeal()}>
<Text>Add</Text>
</TouchableOpacity>
</View>
)}
>
<AddMealScreen ref={ref => this.mealScreen = ref} />
</Scene>
</Router>
);
}
}

希望这有帮助。