如何在NavigatoriOS组件中更新初始路由的道具？

Question

这个问题是关于围绕几个组件传递数据对象的策略。

在下面的屏幕截图中，我有一个 NavigatorIOS ，其初始路径为 ListComponent 。它位于侧边菜单中，显示过滤器组件。目前，侧边菜单已打开，过滤器可见。

我的目标是，当用户更改过滤器中的内容时，我想更新 ListComponent 。

我可以使用单例对象来存储过滤器，但我仍然需要找到一种方法来告诉 ListComponent 他们已经更改了。

var defaultFilters = {
invited: true,
joined: false,
public: true,
private: false,
}

class MainTab extends Component {

constructor( props ){
    super(props);

    this.props.filters = defaultFilters;
}

render () {

    var onFilterChange = function ( filters ) {
        console.log("filters changed");
    };

    var filtersComponent = ( <Filters filters={this.props.filters} onFilterChange={onFilterChange.bind(this)} /> );

    return (
        <SideMenu menu = { filtersComponent } touchToClose={true} openMenuOffset={300} animation='spring'>
            <NavigatorIOS 
                style={styles.container}
                initialRoute={{
                    title: 'List',
                    component: ListComponent
                }}

                />
        </SideMenu>
    );
}
}

解决

    var onFilterChange = function ( filters ) {
        console.log("filters changed");

        this.refs.navigator.replace({
            title: 'List',
            component: ListComponent,
            passProps: {
              filters: filters
            }
          });
    };

   <NavigatorIOS 
            ref='navigator'
            ...
            />

Answer 1

该路线有passProps选项，可接受道具对象，因此您可以将道具传递到导航器中的组件。您可能会更改MainTab中的onFilterChange州，并通过passProps向下传递。或者，您可能希望查看导航器上的replace方法。

https://facebook.github.io/react-native/docs/navigatorios.html

Answer 2

使用OP，joshua-lieberman，同样的回复。

使用导航器

对我有用

var onFilterChange = function ( filters ) {
    console.log("filters changed");

    this.refs.navigator.replace({
        title: 'List',
        component: ListComponent,
        passProps: {
          filters: filters
        }
      });
};
...
        <Navigator
        ref='navigator'
        ...
        />

我在 componentDidMount

中使用它

componentDidMount() {
    this.changeInitialRoute(this.refs.navigator);
}

changeInitialRoute(navigator) {
    const valet = this.props.valet;
    if (valet && valet.user_id && valet.token) {
        console.log('valet ready', this.props);
        navigator.resetTo({title: 'Home', index: 0});
    } else {
        navigator.resetTo({title: 'Login', index: 0});
    }
}