Question

我正在开发React Native应用。这是我的屏幕：

NuevoTotalScreen.js

import React from 'react';
import { Provider } from 'react-redux';
import { View, ScrollView, Text, StyleSheet, Button } from 'react-native';
import Controles from '../components/Controles';
import ContadorContainer from '../components/ContadorContainer';
import { connect } from 'react-redux';
import store from '../state/store';

class NuevoTotalScreen extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <View style={styles.container}>
                    <Text style={ styles.title }>Nuevo total</Text>

          <Controles />

          <ScrollView style={styles.scrollViewContainer}>
            <ContadorContainer />
          </ScrollView>

          <Text style={styles.total}>{ this.props.total }</Text>
                    <Button
            title="Guardar"
            color="grey"
            onPress={() => this.props.navigation.goBack()}
          />
        </View>
      </Provider>
    );
  }
}

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

const mapDispatchToProps = {};

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

这是我的商店：

store.js

import { combineReducers, createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';

import counterReducer from './reducers/counter';
import totalReducer from './reducers/total';

const rootReducer = combineReducers({
  counter: counterReducer,
  total: totalReducer
});

const store = createStore(
  rootReducer,
  compose(
    applyMiddleware(thunk),
  ),
);

export default store;

我得到的错误是：

不变式违规：在上下文或 “ Connect（NuevoTotalScreen）”的道具。将组件包装在，或显式传递“ store”作为道具 “连接（NuevoTotalScreen）”

我将代码上传到https://github.com/luis-sama/tp5Mobiles

Answer 1

如果堆栈导航中有三个屏幕，则只需将它们保存在变量中并导出即可。然后，只需将该变量导入提供程序组件。

示例

nav.js

import FirstScreen from "..";
import SecondScreen from "..";
import ThirdScreen from "..";

export const FooStackNavigation = createStackNavigator({
  FirstScreen: FirstScreen,
  SecondScreen: SecondScreen,
  ThirdScreen: ThirdScreen,
})

Main.js（在您的用例中为NuevoTotalScreen.js）

import { FooStackNavigation } from "./nav.js";

...

<Provider store={store}>
  <FooStackNavigation />
</Provider>

FirstScreen.js（在FooStackNavigation中）

...

render () {
  return (
    <View><Text>{this.props.foo}</Text></View>
  );
}

const mapStateToProps = state => ({
  foo: state.foo
});

export default connect(mapStateToProps, null)(FirstScreen);

无法在React Native中与Redux存储连接

1 个答案:

示例