如何从另一个类中调用我的非静态函数，而不需要新建一个类的实例？- React Native Router Flux

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

你可以通过使用以下方法调用子组件函数 档号

您使用的是功能组件，因此，您必须使用 使用参考文献 钩子

码。

导航画面：

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

希望能帮到你