Question

我们的App.js文件中包含以下代码，其中包含createDrawerNavigator方法

const RootDrawer = createDrawerNavigator({
  Home: { screen: HomeScreen },
  Detail: { screen: DetailScreen },
  Result: { screen: ResultScreen },
  Section : { screen: SectionScreen }
},{
  contentComponent : ({ navigation }) => (<SideBar navigation={navigation} />),
  initialRouteName: 'Home',
  navigationOptions: {
    headerStyle: {
      backgroundColor: '#26272d',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  },
  transitionConfig: () => ({
    transitionSpec: {
      duration: 500,
      easing: Easing.out(Easing.poly(4)),
      timing: Animated.timing,
    },
    screenInterpolator: sceneProps => {
      const { layout, position, scene } = sceneProps;
      const { index } = scene;

      const height = layout.initHeight;
      const translateY = position.interpolate({
        inputRange: [index - 1, index, index + 1],
        outputRange: [height, 0, 0],
      });

      const opacity = position.interpolate({
        inputRange: [index - 1, index - 0.99, index],
        outputRange: [0, 1, 1],
      });

      return { opacity, transform: [{ translateY }] };
    },
  }),
});

而且我有充当抽屉的屏幕SideBar：

import React, { Component, PureComponent } from 'react';
import { connect } from 'react-redux';
import { Image, StyleSheet, View, TouchableOpacity, Text, Linking } from 'react-native';
import { Icon } from 'native-base';
import {StackActions, NavigationActions, DrawerActions} from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';

export default class SideBar extends React.Component {

  goTo = (section) => {

    const resetAction = StackActions.reset({
      index: 0,
      actions: [
        NavigationActions.navigate({ routeName: 'Section' })
      ]
    })

    return () => this.props.navigation.dispatch(resetAction);

  }

  render() {
    return(
      <View style={styles.container}>
        <View>
          <View style={styles.logo}><Image source={require('./images/ln-header-bg.jpg')} style={styles.ln_logo} resizeMode="contain" /></View>
          <TouchableOpacity style={styles.link_menu} onPress={() => { this.goTo('all'); }}><Text style={styles.link_menu_text}>Últimas noticias</Text></TouchableOpacity>
          <TouchableOpacity style={styles.link_menu} onPress={() => { this.goTo(68); }}><Text style={styles.link_menu_text}>La Nación</Text></TouchableOpacity>
          <TouchableOpacity style={styles.link_menu} onPress={() => { this.goTo(69); }}><Text style={styles.link_menu_text}>El Mundo</Text></TouchableOpacity>
          <TouchableOpacity style={styles.link_menu} onPress={() => { this.goTo(70); }}><Text style={styles.link_menu_text}>Gente</Text></TouchableOpacity>
          <TouchableOpacity style={styles.link_menu} onPress={() => { this.goTo(97); }}><Text style={styles.link_menu_text}>#YoParticipo</Text></TouchableOpacity>
        </View>
        <View>
          <Text style={styles.follow_social}>Síguenos en las redes</Text>
          <View style={styles.follow_social_links}>

          </View>
        </View>
      </View>
    )
  }
}

在SideBar中，我想调用位于Home Component中的一个函数，我尝试使用react navigation dispacth方法，但不起作用。

该调用该函数或导航到另一个屏幕需要什么？可以帮我吗？

谢谢！

Answer 1

我从没从反应导航中使用过抽屉，但是我认为它们的工作方式与stackNavigators类似。因此，假设您可以做的是在主屏幕中设置导航参数，例如，在componentDidMount（）方法内部，如下所示：

this.props.navigation.setParams({ 'paramName': paramValue });

然后在抽屉中的componentWillMount（）方法中，可以执行以下操作：

const var_x = this.props.navigation.getParam('paramName', null);

这样，您既可以将函数本身作为参数发送，也可以将其发送给主屏幕，然后从抽屉访问其方法。

ps：在两个调用中，paramName必须为字符串。 ps2：在getParam方法调用中，第二个参数（在示例中为null）是默认值，以防请求的参数没有值。

同样，我将这种方法用于stackNavigators，因此您可以查看react-navigation文档以再次检查抽屉是否有任何差异：https://reactnavigation.org/docs/en/drawer-navigator.html#docsNav

如何在React Native中从Drawer调用另一个组件中的函数

1 个答案: