Question

请问有人帮我管理StackNavigator和Redux集成吗？一切看起来都很简单，但不起作用。

index.ios.js

import React from 'react'
import {
  AppRegistry
} from 'react-native'

import { Provider } from 'react-redux'
import configureStore from './configureStore'

import { StackNavigator } from 'react-navigation';

import Welcome from "./screens/welcome";
import Accounts from "./screens/accounts";

const store = configureStore()

const Nav = StackNavigator({
  Welcome: {
    screen: Welcome,
  },
  Accounts: {
    screen: Accounts,
  },
});

const TestApp = () => (
  <Provider store={store}>
    <Nav />
  </Provider>
)

AppRegistry.registerComponent('TestApp', () => RNRedux)

configureStore.js

import { createStore } from 'redux'
import rootReducer from './reducers'

export default function configureStore() {
  let store = createStore(rootReducer)
  return store
}

减速器/ index.js

import { combineReducers } from 'redux'
import accounts from './accounts'

const rootReducer = combineReducers({
  accounts
})

export default rootReducer

屏幕/ accounts.js

import React from 'react';

import { StyleSheet, Text, View, button } from 'react-native';
import { ListItem } from 'react-native-elements';
import { StackNavigator } from 'react-navigation';

import { connect } from 'react-redux';

export class Accounts extends React.Component {
  static navigationOptions = {
    title: 'Accounts',
  }
  constructor(props) {
    super(props);
  }
  render() {
    state = {}
    const { navigate } = this.props.navigation;
    return (
      <View>
        {
          this.props.accounts.map((l, i) => (
            <ListItem
              key={i}
              title={l.title}
              subtitle={l.hash}
            />
          ))
        }
      </View>
    );
  }
}

function mapStateToProps (state) {
  return {
    accounts: state.accounts
  }
}

export default connect(
  mapStateToProps,
)(Accounts)

减速器/ accounts.js

const initialState = {
  accounts: [
    {
      title: "Bitcoin Slash Fund",
      hash: "0x83247jfy344fgg",
    },
  ],
}

export default function (state = initialState, action) {
  switch (action.type) {
    default:
      return state;
  }
}

当我导航到帐户屏幕时，出现错误

TypeError: undefined is not a function (near '...this.props.state.accounts.map...');

帐户屏幕似乎没有实际连接到Redux，我无法弄清楚原因。有任何想法吗？非常感谢。

Answer 1

试试这个：

function mapStateToProps (state) {
  // Just FYI here you can use console.log to see the state)
  // console.log(state);
  return {
    accounts: state.accounts.accounts
  }
}

你可以在Xcode或AndroidStudio中看到console.log输出。

Answer 2

请勿使用Redux管理导航器的状态。请参阅此官方文档：https://reactnavigation.org/docs/en/redux-integration.html

在我的情况下，如果您只是想在Redux状态更改时更改导航器的标题，请使用screenProps，请参阅：Passing screenProps to a tab navigator

例如在您的App.js render方法中，将screenProps传递到目标组件

import { LoginStackNavigator } from './navigators/LoginStackNavigator'

render () {

  return (
    <LoginStackNavigator screenProps={
      {
        // Step1. pass the value into the navigator component instance. 
        tradeTitle: i18n.t('trade', {locale: this.props.language}),
      }
    }/>
  )
}

以及相关文件（例如LoginStackNavigator.js）

import { AppTabNavigator } from '../navigators/AppTabNavigator'
export const LoginStackNavigator = createStackNavigator({
  Trade: {
    screen: AppTabNavigator
  }
  //...

以及最终文件（AppTabNavigator）

export const AppTabNavigator = createBottomTabNavigator({
  TradeStackNavigator: {
    screen: TradeStackNavigator,
    navigationOptions: ({navigation, navigationOptions, screenProps}) => {
      return {
        // Step2. here use screenProps to retrieve the value passed in . 
        tabBarLabel: screenProps.tradeTitle,
      }
    }

如何将StackNavigator与Redux一起使用？

2 个答案: