将navigation.navigate传递给子组件

Question

使用反应导航构建应用程序。我有一个父组件，它从firebase中提取并在listview中呈现数据。列表视图渲染组件“ ListName”具有onRowPress函数，但是未定义this.props.navigation.navigate，因为导航不在该子组件的状态。

Ive尝试了多种方式将导航道具传递给孩子，也从孩子中的反应导航导入导航。没用。

谢谢！

这是我的rootStackNavigator：

const RootStackNavigator = StackNavigator(
  {
    Login: { screen: LoginScreen },
    Main: { screen: MainTabNavigator },
    Feedback: { screen: ProvideInstanceScreen }
  },
  {
    navigationOptions: () => ({
      //headerTitleStyle: {
        //fontWeight: 'normal',
        tabBarVisible: false,
        header: null
      //},
    }),
  }
);

这是我的父组件（其状态为navigation.navigate）

import React from 'react';
import { ListView, StyleSheet, Text, Image } from 'react-native';
import { connect } from 'react-redux';
import _ from 'lodash';
import { MainButton, GenSection } from '../components/common';
import { namesFetch } from '../actions';
import ListName from '../components/ListName.js';

class ProvideScreen extends React.Component {

  static navigationOptions = {
    header: null,
  };


  componentWillMount() {
  //console.log('HOME HOME HOME  PRINT', this.props)
    this.props.namesFetch();

    this.createDataSource(this.props);
  }

  componentDidMount() {
    console.log('PROVIDE PROPS   PRINT', this.props)
    this.createDataSource(this.props);
  }

  componentWillReceiveProps(nextProps) {
    //nextProps are next set of props component is rendered with and this.props is still old props
    console.log('NEXT PROPS', nextProps)
    this.createDataSource(nextProps);
  }


  createDataSource({ names }) {
    var namesArray = names.map(function(a) {return [a.name, a.uid];});
    //console.log('NAMES ARRAY PRINT', namesArray)
    const ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2
    });
    this.dataSource = ds.cloneWithRows(namesArray);
  }

  renderRow(user) {
    return <ListName name={user[0]} />;
  }


  render() {
    return (
      <Image
        source={require('../components/images/mainBG.png')}
        style={styles.containerStyle}>
        <Text style={styles.textStyle}>
          Provide Feedback
        </Text>
        <GenSection style={{paddingTop: 8}} />
        <ListView
          enableEmptySections
          dataSource={this.dataSource}
          renderRow={this.renderRow}
          removeClippedSubviews={false}
        />

    </Image>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 15,
    backgroundColor: '#fff',
  },
  containerStyle: {
    flex: 1,
    width: undefined,
    height: undefined,
    backgroundColor:'transparent'
  },
  textStyle:
  {
    paddingTop: 20,
    paddingLeft: 12,
    fontSize: 32,
    fontWeight: '200',
    color: '#597abc'
  }
});



const mapStateToProps = state => {
  //console.log('STATE PRINT', state.feedbackInput)
  const names = _.map(state.feedbackInput, (val) => {
    return { ...val};
  });
  //console.log('NAMES PRINT', names)
  return { names };
};  //this is lodash   .map iterates over key value pairs and run function which assigns data to groups array



export default connect(mapStateToProps, { namesFetch })(ProvideScreen);

这是我的子组件（状态中没有navigation.navigate）：

import React, { Component } from 'react';
import { Text, TouchableWithoutFeedback, View } from 'react-native';
import { connect } from 'react-redux';
import { ListButton } from './common';

class ListName extends Component {
  onRowPress() {
    console.log('ON ROW PRESS  PRINT', this.props)
    this.props.navigation.navigate('Feedback', this.props);
  }

  componentDidMount() {
    //console.log('LIST NAME LIST NAME  PRINT', this.props)
  }

  render() {
    const name = this.props.name;
    //console.log('LISTNAME PRINT', name)

    return (
      <TouchableWithoutFeedback onPress={this.onRowPress.bind(this)}>
        <View>
          <ListButton>
            <Text style={styles.titleStyle}>
              {name}
            </Text>
          </ListButton>
        </View>
      </TouchableWithoutFeedback>
    );
  }
}

const styles = {
  titleStyle: {
    alignSelf: 'center',
    color: '#fff',
    fontSize: 16,
    fontWeight: '600',
  }
};


const mapStateToProps = state => {
  //console.log('NAMES PRINT', names)
  return state
};  //this is lodash   .map iterates over key value pairs and run function which assigns data to groups array


export default connect(mapStateToProps)(ListName);

Answer 1

基于React导航：https : //reactnavigation.org/docs/en/connecting-navigation-prop.html

您只需要将withNavigation导入子组件。

import { withNavigation } from 'react-navigation';

然后导出：

export default withNavigation(<YourChildComponent>);

Answer 2

一种方法是在您的ProvideScreen组件中有一个 onPress 处理程序，该处理程序向下传递到您的列表项组件，因此在ProvideScreen的 onRowPress 函数中，您将可以访问this.props.navigation.

在ProvideScreen：

class ProvideScreen extends Component {
  ...
  onRowPress(someRowData) {
    this.props.navigation.navigate('Feedback', { someRowData });
  }
  ...

  renderRow(user) {
    return <ListName name={user[0]} onRowPress={this.onRowPress} />;
  }
}

在ListName：

class ListName extends Component {
  ...
  onRowPress() {
    this.props.onRowPress(someData);
  }
  ...
}

当然，不要忘记this在使用事件处理程序时将函数绑定到作用域。例如在构造函数中：

this.onRowPress = this.onRowPress.bind(this);

onRowPress使用箭头函数的替代定义：

onRowPress = () => {
 this.props.navigation.navigate...
}

Answer 3

我只是从父母那里添加了这个道具，它起作用了：

<AppFooter navigation={this.props.navigation}  />