本机反应:每个动态视图有不同的状态

Question

我的应用程序所做的是从API中获取数据，并发布一个事件列表，每个事件都有各自独特的信息，但都是动态完成的，每个事件都遵循相同的视图/样式/容器等。我有一个图标(通知图标)，当用户点击它时，它会更改特定事件的图标(如图片所示)。但我现在拥有的是，每个事件的所有图标都会改变，而不是单个事件。

export default class LaunchingScreen extends React.Component{

  constructor(props) {
    super(props);  
    this.state = {
      NotifIcon: "md-notifications-off",
      isLoading: true,
      dataSource: null,
      refreshing: false,
      isActive: true,

    };
  }
      //Gets data from API 
      componentDidMount(){
        return fetch("https://launchlibrary.net/1.4/launch/next/20")
          .then(response => response.json())
          .then(responseJson => {
            this.setState({
              isLoading: false,
              dataSource: responseJson.launches
            }); 
          })
          .catch(error => {
            console.log(error);
          });
      }
      //Renders Screen
      render() {
        //Refresh if statement
        if (this.state.isLoading) {
          return (
            <View style={styles.container}>
              <ActivityIndicator />
            </View>
          );
        } 
        else{

          //Launches is what its called on later to display what is being said in launches
          let launches = this.state.dataSource.map((item, key) => {

          return (
            <View key={key} style={styles.container}>
              <Image
                style={{ width: "100%", height: 475, borderRadius: 10, opacity: 1 }}
                source={RocketImage}
                />
                <View style={styles.iconBar}>
                  <Entypo
                    name="video-camera"
                    color={"white"}
                    size={30}
                    style={styles.VideoIcon}
                    onPress={() => {
                      if (item.vidURLs.length > 0) {
                        Linking.openURL(item.vidURLs[0]);
                      } else if (item.vidURLs.length == 0) {
                        Alert.alert("There is no livestream available.");
                      }
                    }}
                  />
                  <Ionicons
                    name={this.state.NotifIcon}
                    color={"white"}
                    size={30}
                    style={styles.NotifIcon}
                      onPress={() => {
                        Vibration.vibrate()
                        if(this.state.isActive){
                          PushNotificationIOS.scheduleLocalNotification({
                            alertTitle: "Launching Soon!",
                            alertBody: FullName + " is going to launch soon! Get the livestream here!",
                            fireDate: new Date(Date.now() + (60 * 1000)) // in 30 mins
                          });
                          this.setState({
                            NotifIcon : "md-notifications"
                          });
                          this.state.isActive = false;
                        }
                        else if(this.state.isActive != true){
                          PushNotificationIOS.cancelLocalNotifications();
                          this.setState({
                            NotifIcon : "md-notifications-off"
                          });
                          this.state.isActive = true;
                        }

                    }}
                  />

                </View>

我将如何努力使每个事件的每个状态/图标独立？谢谢!

图片：https://imgur.com/a/8tpczqs

Answer 1

它们都会改变，因为所有的“通知”图标都在使用相同的状态，要解决这个问题，您需要将它们变成一个具有自己的状态管理的单独的自定义组件。这个菜单创建了一个新的Bell.js文件，其内容如下：

import * as React from 'react';
//import things here
export default class Bell extends React.Component {
  constructor() {
    super();
    this.state = {
      isActive: true,
      NotifIcon:"md-notifications-off"
    };
  }

  render() {
    return (
      <Ionicons
                    name={this.state.NotifIcon}
                    color={"white"}
                    size={30}
                    style={styles.NotifIcon}
                      onPress={() => {
                        Vibration.vibrate()
                        if(this.state.isActive){
                          PushNotificationIOS.scheduleLocalNotification({
                            alertTitle: "Launching Soon!",
                            alertBody: this.props.FullName + " is going to launch soon! Get the livestream here!",
                            fireDate: new Date(Date.now() + (60 * 1000)) // in 30 mins
                          });
                          this.setState({
                            NotifIcon : "md-notifications"
                          });
                          this.state.isActive = false;
                        }
                        else if(this.state.isActive != true){
                          PushNotificationIOS.cancelLocalNotifications();
                          this.setState({
                            NotifIcon : "md-notifications-off"
                          });
                          //if you want to do something or notify the app , you can use something like this.props.onTap 
                          this.state.isActive = true;
                        }

                    }}
                  />
    );
  }
}

然后导入组件并使用它。

import NotificationBell from './Bell'

为了使用它，你只需把这个

<View style={styles.iconBar}>
                  <Entypo
                    name="video-camera"
                    color={"white"}
                    size={30}
                    style={styles.VideoIcon}
                    onPress={() => {
                      if (item.vidURLs.length > 0) {
                        Linking.openURL(item.vidURLs[0]);
                      } else if (item.vidURLs.length == 0) {
                        Alert.alert("There is no livestream available.");
                      }
                    }}
                  />
                  <NotificationBell FullName='Here you place the name' onTap={()=>{this.doSomething()}}/>

                </View>

您可以在这个令人敬畏的中篇中找到如何创建自定义组件和处理通信/发送“道具”的方法。