如何更新 NavigatoriOS 组件中初始路由的属性？

Question

这个问题是关于在多个组件之间传递数据对象的策略。

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

我的目标是当用户在 Filters 中更改内容时，我想更新 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 选项，它接受道具对象，所以这就是您将道具传递到导航器中的组件的方式。您可能会在 onFilterChange 中更改您的 MainTab 状态并通过 passProps 将其传递下去。或者，您可能想查看导航器上的 replace 方法。

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

Answer 2

使用 OP，joshua-lieberman，相同的响应。

使用 Navigator

它对我有用

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});
    }
}

如何更新 NavigatoriOS 组件中初始路由的属性？

How to update props of initial route in a NavigatoriOS component?

navigation

react-native

已解决