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>

您可以在这个很棒的Medium Article

中找到如何创建自定义组件以及处理通信/发送“道具”的方式。

React Native：每个动态视图具有不同的状态

1 个答案: