带有 redux 的 React-Native-Navigation V2 无法传递道具

Posted 2023-02-16

【中文标题】带有 redux 的 React-Native-Navigation V2 无法传递道具

【英文标题】：React-Native-Navigation V2 with redux cannot pass props

【发布时间】：2019-02-07 04:06:59

【问题描述】：

我有一个简单的两屏应用，带有 redux 和 React-Native-Navigation V2。我尝试将列表中的项目作为道具传递到另一个视图。不幸的是，我收到一个错误：

TypeError: 无法读取未定义的属性“id”

该项目已通过但未在第二个视图中作为道具接收。在没有 Redux 的情况下一切正常。我是否正确注册了视图？

观看次数注册：

export default (store) =>  
  Navigation.registerComponent('example.app.FirstScreen', reduxStoreWrapper(FirstScreen, store));
  Navigation.registerComponent('example.app.SecondScreen', reduxStoreWrapper(SecondScreen, store));


function reduxStoreWrapper (MyComponent, store) 
  return () => 
    return class StoreWrapper extends React.Component 
      render () 
        return (
          <Provider store=store>
            <MyComponent />
          </Provider>
        );
      
    ;
  ;

第一次查看：

class FirstScreen extends Component 
  componentDidMount() 
    this.props.listItems();
  

  onItemPress = (item: Item) => 
    Navigation.push(item._id, 
      component: 
        name: 'example.app.SecondScreen',
        passProps: 
          item: item
        
      
    );
  ;

  render() 
    return (
      <View>
        <ItemsList items=this.props.items onItemPress=this.onItemPress/>
      </View>
    );
  


const mapStateToProps = state => 
  let items = state.itemsReducer.items.map(item => ( key: item.id, ...item ));
  return 
    items: items
  ;
;

const mapDispatchToProps = 
  listItems
;

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

第二次查看：

class SecondScreen extends Component 
  static propTypes = 
    item: PropTypes.object.isRequired,
  ;

  componentDidMount() 
    const  item  = this.props;
    this.props.listSubitems(item.id);
  

  render() 
    const  subitems  = this.props;
    return (
      <View>
        <SubitemsList subitems=subitems/>
      </View>
    );
  


const mapStateToProps = state => 
  let subitems = state.subitemsReducer.subitems.map(subitem => ( key: subitem.id, ...subitem ));
  return 
    subitems: subitems
  ;
;

const mapDispatchToProps = 
  listSubitems
;

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

【参考方案1】：

视图应该以这种方式注册：

export default (store, Provider) =>  
  Navigation.registerComponentWithRedux('example.app.FirstScreen', () => FirstScreen, Provider, store);
  Navigation.registerComponentWithRedux('example.app.SecondScreen', () => SecondScreen, Provider, store);

【讨论】：

此方法现已弃用。见：wix.github.io/react-native-navigation/#/docs/…