从抽屉导航器到其他组件反应本机设置状态 [英] React native set state from drawer navigator to other component

问题描述

在第一个屏幕上，我有一个组件，其中包含一些产品清单，例如ProductListing.js.在抽屉式导航器上，我有一些复选框.当我单击导航器的任何复选框时，我想设置ProductListing.js的状态.

On first screen I have a component having some listing of products say ProductListing.js. And on drawer navigator I have some check boxes. I want to set state of ProductListing.js when I am clicking on any check box of navigator.

App.js

App.js

import React, {Component} from 'react';
import Router from './src/config/routes';
export default class App extends React.Component {
  render () {
    return (
      <Router/>
    );
  }
}

Router.js

Router.js

export default DrawerNavigator({
Dashboard: {screen: Dashboard},
   CreateLogin: {screen: CreateLogin},
   Test: {screen: Test}
}, {
   contentComponent: SideMenu,
   drawerWidth: 300,
   drawerPosition: 'right'
 });

SideMenu.js

SideMenu.js

render () {
  const { data, searchTerm, searchAttribute, ignoreCase, checked } = this.state;
    return (
      <View style={styles.container}>
        <ScrollView>
          <View>
          <TextInput
                style={styles.search} placeholder={"Search"}
                onChangeText={searchTerm => this.setState({ searchTerm })} />

              <SearchableFlatList
                 data={data} searchTerm={searchTerm}
                searchAttribute={searchAttribute} ignoreCase={ignoreCase}
                renderItem={({ item, index }) => <CheckBox
                                                          title={item.name +' ('+ item.count+')'}
                                                          onPress={() => this.handleChange(item.id)}
                                                          checked={checked[item.id]} />
                                                      }
                keyExtractor={({id}, index) => index.toString()} />
          </View>
        </ScrollView>
        <View style={styles.footerContainer}>
          <Text>Apply filter by choosing filter values</Text>
        </View>
      </View>
    );
  }
}

ProductListing.js

ProductListing.js

constructor(props){
            super(props);
            this.state ={ isLoading: true,isloadmore: false, page :1,dataSource: [],countryFilter:0, gradesFilter:'',country:'',totalRecord:0};
       }

render(){
const { navigation } = this.props;
           return(
 <View style={{flexDirection:'column',paddingRight:8}}>
                        <Button
                          title='Filter'
                          buttonStyle={{backgroundColor:'#000000',borderRadius:2}}
                          onPress={() => navigation.dispatch(DrawerActions.openDrawer())}
                        />
                   </View>
 );

       }

现在在SideMenu.js中单击handleChange时，我想更新要更新产品清单的ProductListing.js中gradesFilter的状态.

Now on click of handleChange in SideMenu.js I want to update state of gradesFilter in ProductListing.js where I am updating my product listing.

推荐答案

您可以通过导航参数将参数从抽屉传递到产品"屏幕. 为此，您需要像这样在DrawerNavigator中堆叠stackNavigator: 路由器:

You can pass the parameters from drawer to the Product screen via navigation params. For this, you need to stackNavigator inside your DrawerNavigator like: Router:

const MyStack = StackNavigator({
  Dashboard: {screen: Dashboard},
  CreateLogin: {screen: CreateLogin},
  Test: {screen: Test}
});

const MyDrawer = DrawerNavigator({
  Main: { screen: MyStack }
},
  {
   contentComponent: SideMenu,
   drawerWidth: 300,
   drawerPosition: 'right'
 });

export const Router = StackNavigator({
  Login: {screen: Login},
  Drawer: {
     screen: MyDrawer,
     navigationOptions: { header: null } } //prevent double header
});

现在，您可以通过Drawer之类的

Now you can navigate and pass parameter from login or Dashboard or anyother screen via Drawer like

_login() {
    this.props.navigation.navigate('Drawer', { parameter: userName });
}

要使用此参数，您需要访问:

And to use this parameter you need to access:

  const { parameter } = this.props.navigation.state.params;

您可以进一步使用它来设置状态，例如

which you can further use to set state like

this.setState({
productSelection: parameter)};

另一种方法可以通过侦听器/回调处理程序.

Another approach can be via, listener/ Callback handler.

这篇关于从抽屉导航器到其他组件反应本机设置状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！