Question

我在我的应用程序中使用本机路由器通量进行路由器导航。而且我正在使用redux和react-redux来访问一些状态变量。

使用以下语句，redux功能可以在我的应用程序中正常工作。

export default connect(mapStateToProps,mapDispatchToProps)(ComponentName);

是否可以在App.js文件本身中使用mapStateToProps？

我在我的应用程序中使用react-native-i18n npm软件包进行语言翻译。我正在将当前语言存储在redux存储中。因此，如果我在应用程序中更改语言，则redux存储中的变量将被更改，并且更改将反映在所有屏幕中。但是语言更改不会反映到标题和标签导航器中，因为它在我的app.js文件中。

如何在app.js文件中监听状态变化？

PFA我的App.js文件和示例文件（Screen2.js）文件。

提前谢谢！

App.js文件：

import React, { Component } from 'react';
import { Provider,connect } from 'react-redux';
import I18n from './locale/i18n';
import store from './Reducers/index';
import { Actions, ActionConst, Router, Scene } from 'react-native-router-flux';

const ConnectedRouter = connect()(Router);

let Scenes = Actions.create(
  <Scene key="root">
    <Scene key='Screen1' hideNavBar title='Screen1' component={Screen1}></Scene>
    <Scene key="tabbar" tabs={true}>
      <Scene key="tab1" title={I18n.t('TabTile1')} icon={CustomComponenet} initial> 
        <Scene key="Screen2" component={Screen2} title="Screen2" initial/>
        <Scene key="Screen3" component={Screen3} title="Screen3"/>
      </Scene>

      <Scene key="tab2" title={I18n.t('TabTile2')} icon={CustomComponenet} initial>
        <Scene key="Screen4" component={Screen4} title="Screen4" initial/>
        <Scene key="Screen5" component={Screen5} title="Screen5"/>
      </Scene>
    </Scene>
  </Scene>
)

export default class App extends Component {     
  render() {
    return(
      <Provider store={store}>
        <ConnectedRouter scenes={Scenes} />
      </Provider>
    ) 
  }
}

Screen2.js：

import React from 'react';
import I18n from '../locale/i18n'
import { Actions} from 'react-native-router-flux';
import { connect } from 'react-redux';
import * as actions from '../Actions/ActionTypes'

class Dashboard extends React.Component{

render(){
  I18n.locale = this.props.language;

  return(
    <View>.....</View>
  )
}

const mapStateToProps = (state) => ({
    language: state.Reducer.language,
});
export default connect(mapStateToProps)(Screen2);

Answer 1

connect()函数仅在<Provider>标记内的组件中起作用，因此您无法在App.js中使用它，因为您正在创建商店并将其提供给App.js的孩子。

话虽如此，您无需使用mapStateToProps，只需使用store.getState()和store.dispatch()访问状态即可。

Answer 2

如@BrunoEduardo所述，不是将值传递给标头，而是使用自定义的标头，其中反映了语言更改。

HeaderComponent.js：

class HeaderComponent extends React.Component {
      render(){    
          return (
              <View height={25}>
                  <Text>{I18n.t(this.props.title)}</Text>
              </View>
            );
      }
    }

    const mapStateToProps = (state) => ({
      language: state.Reducer.language,
    });

    export default connect(mapStateToProps)(HeaderComponent);

App.js：

import React, { Component } from 'react';
    import { Provider,connect } from 'react-redux';
    import I18n from './locale/i18n';
    import store from './Reducers/index';
    import { Actions, ActionConst, Router, Scene } from 'react-native-router-flux';

    const ConnectedRouter = connect()(Router);

    let Scenes = Actions.create(
      <Scene key="root">
        <Scene key='Screen1' hideNavBar title='Screen1' component={Screen1}></Scene>
        <Scene key="tabbar" tabs={true}>
          <Scene key="tab1" title='tabtitle1' icon={CustomComponenet} initial> 
            <Scene key="Screen2" component={Screen2} title="Screen2" navBar={HeaderComponent} initial/>
            <Scene key="Screen3" component={Screen3} title="Screen3" navBar={HeaderComponent}/>
          </Scene>

          <Scene key="tab2" title='tabtitle2' icon={CustomComponenet} initial>
            <Scene key="Screen4" component={Screen4} title="Screen4" navBar={HeaderComponent} initial/>
            <Scene key="Screen5" component={Screen5} title="Screen5" navBar={HeaderComponent}/>
          </Scene>
        </Scene>
      </Scene>
    )

    export default class App extends Component {     
      render() {
        return(
          <Provider store={store}>
            <ConnectedRouter scenes={Scenes} />
          </Provider>
        ) 
      }
    }

希望有帮助！

如何在app.js文件中使用mapStateToProps？

2 个答案: