navigation - 如何在 NavigatoriOS 组件中更新初始路由的 Prop ？

Question

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

在下面的屏幕截图中，我有一个 NavigatorIOS 初始路由为 列表组件 .它在 侧菜单 显示 过滤器 成分。目前，侧菜单 是开放的和过滤器 是可见的。

我的目标是当用户在 中更改内容时过滤器 ，我要更新列表组件 .

我可以使用单例对象来存储过滤器，但我仍然需要找到一种方法来告诉 列表组件 他们改变了。

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接受 Prop 对象的选项，因此这就是您将 Prop 传递到导航器中的组件的方式。您可能会更改您的 MainTab状态在 onFilterChange并通过 passProps 传递下去.或者，您可能想查看 replace导航器上的方法。

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