导航 – 如何在NavigatoriOS组件中更新初始路径的道具？

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

在下面的屏幕截图中,我有一个NavigatorIOS,其中包含ListComponent的初始路由.它在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'
            ...
            />

该路由有一个passProps选项,它接受一个props对象,这就是你如何将props传递给导航器中的组件.您可以在onFilterChange中更改MainTab状态,并通过passProps传递该状态.或者,您可能希望查看导航器上的replace方法.

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