React Navigation丢失传递下来的道具

Question

我有一个连接到redux的容器,由于connect(mapStateToProps, mapDispatchToProps)线路,它继承了'全局状态'作为道具......

然后容器(Container.js)将道具传递给Table (Table.js),它按预期接收它们.

当我尝试使表成为导航堆栈时,我的问题出现了.原因是我希望能够点击每一行,这些行将导航到DetailPage,这将由依赖于行的不同道具填充.

然而,当添加StackNavigator从Container传递下来的所有道具都消失了,只有React Navigation那些(navigation: {actions:{goBack... ETC}}).

注意:如果我connect直接使用Component,也会发生这种情况.

下面是我的代码结构的dummied down示例.

我做错了什么/我如何保持传下来的道具？

Container.js

class Container extends Component {
  render() {
    return (
      <View>
        <Table {...this.props} />
      </View>
    )
  }
}


const mapStateToProps = state => {
  return {
    data: state.data,
    propTwo: state.propTwo
  }
}

const mapDispatchToProps = dispatch => {
  return {
    functionOne: () => dispatch(functionOne()),
    functionTwo: arg => dispatch(functionTwo(arg))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Market);

Table.js

const DetailPage = () => <View><Text>Just a mock page</Text></View>

class Table extends Component {
  keyExtractor = (item, index) => index;
  renderItem = (argOne, index) => {
    return (
      <ListItem
        onPress={() => this.props.navigate(argOne)}
        key={index} />
    )
  }
  render() {
    return (
      <View>
        <FlatList
          keyExtractor={this.keyExtractor}
          data={this.props.data}
          renderItem={this.renderItem}
          refreshControl={
            <RefreshControl
              onRefresh={this.props.functionTwo}
            />
          }
        />
      </View>
    ) 
  }
}
// react-navigation StackNavigator
export default Table = StackNavigator({
  Table: { screen: Table },
  DetailPage: { screen: DetailPage }
});

Answer 1

您可以将其StackNavigator移至Container.js：

export default StackNavigator({
  Table: { screen: connect(mapStateToProps, mapDispatchToProps)(Container) },
  DetailPage: { screen: DetailPage }
});

您也可以connect直接Table而不是创建Container包装类：

connect(mapStateToProps, mapDispatchToProps)(Table)