如何在不创建 class 的新实例的情况下从另一个 class 调用我的非静态函数？ - React Native Router Flux

Question

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

导航画面：

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

正如你所说，因为它使用 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>
    );
  }
}

希望对您有所帮助。

Answer 2

可以通过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>
  );
}

如何在不创建 class 的新实例的情况下从另一个 class 调用我的非静态函数？ - React Native Router Flux

How do I call my non static function from another class without making a new instance of class? - React Native Router Flux

javascript

react-native

react-native-router-flux