React Native-无法在其他屏幕上显示数据

Question

我要实现的是使用React Redux在其他屏幕或其他组件中显示数据。我正在使用最新版本的React Redux和Redux。

  

我的问题是每次我想要显示数据时，或者当我按下EventCreator.js中的按钮（TouchableOpacity）时，它都不会显示。我尝试检查所有代码，但看不到任何错字或错误代码。

随时要求我提供更多代码。谢谢！

  

更新：我尝试了所有代码到另一个新项目，但使用RNNV1。因此，可能需要更改与React Redux相关的RNNv2新代码。我希望所有查看者都可以集中精力检查有关连接到React Redux的RNNv2的代码。谢谢！

这些是我的代码：

App.js，我所有的注册屏幕。

import {Navigation} from 'react-native-navigation';
import React from 'react';

//Screens
import AuthScreen from './src/screens/Auth/Auth';
import EventMap from './src/screens/Map/Map';
import EventCreator from './src/screens/EventCreator/EventCreator';
import EventHome from './src/screens/Home/Home';
import EventPushScreen from './src/screens/EventPushScreen/EventPushSc';

//Redux
import { Provider } from 'react-redux';

import configureStore from './src/store/configureStore';

const store = configureStore();

//Register Screens
Navigation.registerComponentWithRedux("Event.AuthScreen", () => AuthScreen);
Navigation.registerComponentWithRedux("Event.Map", () => EventMap);
Navigation.registerComponent("EventCreator", () => (props) => (
  <Provider store={store}>
    <EventCreator {...props}/>
  </Provider>
), () => EventCreator);
Navigation.registerComponent("EventHome", () => (props) => (
  <Provider store={store}>
    <EventHome {...props}/>
  </Provider>
), () => EventHome);



//Start A App
Navigation.events().registerAppLaunchedListener(() => {
  Navigation.setRoot({
    root: {
      stack: {
        children: [{
          component: {
            name: "Event.AuthScreen",
          }
        }],
        options: {
          topBar: {
            title: {
              text: 'Welcome',
              alignment: 'center'
            }
          }
        }
      }
     }
  });
});

这是我的第一个屏幕，其中是TextInput和Button（TouchableOpacity）。 EventCreator.js

import EventInput from '../../components/EventInput';

class EventCreator extends Component {

eventAddedHandler = (eventName) => {
  this.props.onAddEvent(eventName);
};

render() {
return (
  <View style={styles.container}>
    <EventInput onEventAdded={this.eventAddedHandler}/>
  </View>
);
}
};

const mapDispatchToProps = dispatch => {
  return {
    onAddEvent: (eventName) => dispatch(addEvent(eventName))
  };
};

export default connect(null, mapDispatchToProps)(EventCreator);

EventInput.js，这是我连接到EventCreate.js的组件

class EventInput extends Component {
state = {
  eventName: ""
};

eventNameChangedHandler = (val) => {
this.setState({
  eventName: val
});
};

eventSubmitHandler = () => {
  if (this.state.eventName.trim() === "") {
    return;
  }

this.props.onEventAdded(this.state.eventName);
};

render () {
return (
  <View style={styles.inputAndButtonContainer}>
    <TextInput
      placeholder="Create your event"
      value={this.state.eventName}
      onChangeText={this.eventNameChangedHandler}
      style={styles.textInputContainer}
    />
    <TouchableOpacity onPress={this.eventSubmitHandler}>
      <View style={styles.buttonContainer}>
        <Text style={{color: 'black'}}>Add</Text>
      </View>
    </TouchableOpacity>
  </View>
);
}
};

Home.js，这是我想显示数据或FlatList的地方。

class Home extends Component {

eventSelectedHandler = key => {
  const selEvent = this.props.events.find(event => {
    return event.key === key;
  });
  Navigation.push("EventHomeStack", {
    component: {
      name: "EventPushScreen",
      passProps: {
        selectedEvent: selEvent
      },
      options: {
        topBar: {
          title: {
            text: selEvent.name
          }
        }
      }
    }
  });
};

render() {
  return (
    <View>
      <EventList 
        events={this.props.events}
        onItemSelected={this.eventSelectedHandler}
      />
    </View>
  );
}
};

const mapStateToProps = state => {
  return {
    events: state.events.events
  };
};

export default connect(mapStateToProps)(Home);

EventList.js，另一个连接到Home.js的组件

import ListItem from './ListItem';

const eventList = (props) => {
  return (
    <FlatList 
      style={styles.listContainer}
      data={props.events}
      renderItem={(info) => (
        <ListItem
          eventName={info.item.name}
          eventImage={info.item.image}
          onItemPressed={() => props.onItemSelected(info.item.key)}
        />
      )}
    />
 );
 };

export default eventList;

listItem.js，另一个连接到EventList.js的组件

const listItem = (props) => (
  <TouchableOpacity onPress={props.onItemPressed}>
    <View style={styles.listItem}>
      <Image resizeMode="cover" source={props.eventImage} style={styles.eventImage}/>
      <Text>
         {props.eventName}
      </Text>
    </View>
  </TouchableOpacity>
 );

 export default listItem;

events.js（减速器）

import {ADD_EVENT, DELETE_EVENT} from '../actions/actionTypes';

const initialState = {
  events: []
};

const reducer = (state = initialState, action) => {
  switch(action.type) {
    case ADD_EVENT:
      return {
        ...state,
        events: state.events.concat({
          key:  `${Math.random()}`, 
          name: action.eventName,
          image: {
            uri: "https://c1.staticflickr.com/5/4096/4744241983_34023bf303_b.jpg"
          }
        })
      };

case DELETE_EVENT:
  return {
    ...state,
    events: state.events.filter(event => {
      return event.key !== action.eventKey;
    })
  };
    default:
      return state;
  }
};

export default reducer;