为什么自定义函数在屏幕渲染期间在 react-native-navigation 抽屉组件中自动执行

Question

我是 react-native 的新手。我正在使用 react-native-navigation (by wix) 进行导航。我为抽屉边栏创建了 "Drawerscreen" 组件，在组件 class 下我创建了一个名称为 "navigateToScr" 的函数。这里 "navigateToScr" 函数在初始化组件期间自动调用，无需从任何地方调用，请任何人解释为什么会这样？

import React, {Component} from 'react';
import {Text, View, StyleSheet, TouchableOpacity, ScrollView, SafeAreaView } from 'react-native'

export default class Drawerscreen extends Component {
  constructor (props){
    super(props);
  }

  navigateToScr = () =>{
    console.log('in');
  }

  render() {
    return (
        <View style={styles.container}>
            <ScrollView>
              <SafeAreaView style={styles.container} forceInset={{ top: 'always', horizontal: 'never' }}>
                    <TouchableOpacity onPress={this.navigateToScr()} style={styles.menulinkcon}>
                      <Text style={styles.menulink}>Test 1</Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={this.navigateToScr()} style={styles.menulinkcon}>
                      <Text style={styles.menulink}>Test 2</Text>
                    </TouchableOpacity>
              </SafeAreaView>
            </ScrollView>
        </View>
    )
  }
}
const styles = StyleSheet.create({ ... });
``````````````````````````````````````````````````````````````````````

````````````````````````````````````````````````````````````````
Navigation.startSingleScreenApp({
    screen: {
        screen: "screen.MainScreen",
        title: 'Main Screen',
    },
    drawer: {
        left: {
            screen: 'screen.Drawerscreen',
            fixedWidth: 500
        }
    }
});
````````````````````````````````````````````````````````````````

Answer 1

通过在 this.navigateToScr 之后放置左括号和右括号，您实际上是在调用它并将 onPress 设置为其返回值。如果您只想在按下时运行函数，请改用

onPress={this.navigateToScr}

或

onPress={() => this.navigateToScr()}

后者通常在需要将值传递给方法时使用。

为什么自定义函数在屏幕渲染期间在 react-native-navigation 抽屉组件中自动执行

Why custom functions execute automatically in react-native-navigation drawer component during screen render

react-native

react-native-navigation