Question

我正在使用下面的代码，我的数据列表在中。现在，按照下面的代码，Icon不能在内部工作。通过单击，正在切换this.state.rmvCircle。布尔值正在更改，但图标没有切换。

但是，如果我只是在内部编写，那么根据通过某些功能进行的切换更改，So Icon可以正常工作。

为刷新listItem中的Icon，我还需要实现什么额外的东西。

import React, { Component } from "react";
import {
  Container,
  Header,
  Title,
  Content,
  Button,
  Icon,
  List,
  ListItem,
  Text,
  Left,
  Right,
  Body,
  View,
  Spinner,
} from "native-base";
import {AsyncStorage, 
  RefreshControl,
  TouchableOpacity,
  Alert
} from "react-native";
import Display from 'react-native-display';
import {fetchApi} from '../../includes/function';
import {networkFailure} from '../../includes/function';
import styles from "./styles";
const GLOBAL = require('../../includes/Global');

class notifylog extends Component {
  constructor(props) {
    super(props);
    this.state = {
     jsonData : '',
     isLoading : true,
     rmvCircle : false
    };
  }

  notifylogFun(){
    let userId = this.state.user;
    if(userId == null || userId==undefined){
      alert("User not found");
      return false;
    }
    const json = JSON.stringify({"userId":userId});
    return fetch(GLOBAL.BASE_URL+'services.php?action=notifylogFun',{
      method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Accept: 'application/json'
        },
        body: json
      })
    .then(function(response) {
      if (!response.ok) {
        this.setState({isLoading: false,resultSet : false});
        throw Error(response.statusText);
      }
      return response;
    })
    .then((response) => response.json())
    .then((responseJson) => {
      if(responseJson.data.message == 'getData'){
        this.setState({isLoading: false, jsonData: responseJson.data.data, resultSet : true});
        return responseJson.data.data;
      }else if(responseJson.data.message == 'noData'){
        this.setState({isLoading: false, jsonData: responseJson.data.data, resultSet : false});
      }else{
        networkFailure("Network Failure.");
      }
    })
    .catch((error) => {
      networkFailure("Network Failure");
    });
  }

  componentWillMount() {
    AsyncStorage.getItem('userId', (err, result) => {
      this.setState({
        user: result
      },this.notifylogFun);
    });
  }

  toggleDisplay() {
    let toggle = !this.state.rmvCircle;
    this.setState({rmvCircle: toggle});
  }

  render() {
    if(this.state.isLoading == true ) {
      return (
        <Container style={styles.container}>
          <Header
            style={{ backgroundColor : GLOBAL.ThemeHeader}}
            androidStatusBarColor="#dc2015"
            iosBarStyle="light-content"
          >
            <Left>
              <Button transparent onPress={() => this.props.navigation.goBack()}>
                <Icon style={{ color : GLOBAL.ThemeMenu}} name="arrow-back" />
              </Button>
            </Left>
            <Body>
              <Title style={{ color : GLOBAL.ThemeHeaderTitleColor}}>Notifications</Title>
            </Body>
            <Right />
          </Header>
            <View style={styles.loaderContainer}>
              <Spinner color="blue"/>
            </View>
        </Container>
      );
    } 
   else if(this.state.isLoading == false && this.state.resultSet == false) {
      return (
        <Container style={styles.container}>
          <Header
              style={{ backgroundColor : GLOBAL.ThemeHeader}}
              androidStatusBarColor="#dc2015"
              iosBarStyle="light-content"
            >
            <Left>
              <Button transparent onPress={() => this.props.navigation.goBack()}>
                <Icon style={{ color : GLOBAL.ThemeMenu}} name="arrow-back" />
              </Button>
            </Left>
            <Body>
              <Title style={{ color : GLOBAL.ThemeHeaderTitleColor}}>Notifications</Title>
            </Body>
            <Right />
          </Header>
          <View style={styles.loaderContainer}>
            <Text>No Notifications Logs</Text>
          </View>
        </Container>
      );
    } 
    else
    {
      return (
        <Container style={styles.container}>
          <Header style={{ backgroundColor : GLOBAL.ThemeHeader}} androidStatusBarColor="#dc2015" iosBarStyle="light-content">
            <Left>
              <Button transparent onPress={() => this.props.navigation.goBack()}>
                <Icon style={{ color : GLOBAL.ThemeMenu}} name="arrow-back" />
              </Button>
            </Left>
            <Body>
              <Title style={{ color : GLOBAL.ThemeHeaderTitleColor}}>Notifications</Title>
            </Body>
            <Right>
              <TouchableOpacity onPress={() => this.toggleDisplay()}>
                <Text style={{ color : GLOBAL.ThemeMenu}}>
                  Clear
                </Text>
              </TouchableOpacity>
            </Right>
          </Header>
          <Content>
            <List 
              dataArray={this.state.jsonData}
              renderRow={data =>
              <ListItem style={{borderBottomWidth: 1,marginLeft: 0, backgroundColor : data.rowBg}}>

                <Left>
                  <Text>
                    {data.text}
                  </Text>
                </Left>
                <Right>
                   <Display 
                    enable={this.state.rmvCircle} 
                    enterDuration={500} 
                    exitDuration={250}
                    exit="fadeOutLeft"
                    enter="fadeInLeft"
                  >
                    <Icon style={{color:'red'}} name="md-remove-circle" />
                  </Display>
                </Right>
              </ListItem>}
            />
          </Content>
        </Container>
      );
    }
  }
}

export default notifylog;

Answer 1

您要根据this.state.rmvCircle来打开或关闭图标。

export const doInitAuth = emailAddress => {
  getSession()
    .then(
      // Step 01 Check there is a current live session (Optional)
      session => {
        return null; // stopped the auth flow and dropped `session`
      },
      error => {
        // Step 02 Signup a new account
        return signUp(emailAddress).then(
          userData => {
            return null; // stopped the auth flow and dropped `userData`
          },
          error => {
            // Resend account verification code if user already signed up
            return resendConfirmationCode().then(
              result => {
                return null; // stopeed the auth flow and dropped `result`
              },
              error => {
                return forgotPassword(); // HACK: (Xinyang) There is a limit for number of time a user can "forgot" the password in a given time
              }
            );
          }
        );
      }
    )
    .catch(error => {
      throw Error("Unhandled error in the auth flow", error);
    });
};

Answer 2

如果使用dataSource创建列表，则呈现列表内容：）

更改react-native中的嵌套组件

2 个答案: