使用地图功能在React Native中进行条件渲染

Question

我正在尝试构建一个通知页面，该页面使用 Notification函数从远程服务器上获取通知，因此我最初在呈现通知之前将NotificationLoaded设置为false以便使用ActivityLoader到页面。

但是我对在notifyLoaded状态设置为true之前如何呈现ActivityLoader感到困惑。

预先感谢

import React, { Component } from 'react';
import {
  StyleSheet,
  ScrollView,
  Dimensions,
  Text,
  ActivityIndicator,
  TouchableOpacity,
  TextInput,
  View,
  StatusBar,
  ImageBackground,
  KeyboardAvoidingView,
  AsyncStorage,
} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { Font } from 'expo';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import { KeyboardAwareView } from 'react-native-keyboard-aware-view';


const { height, width } = Dimensions.get('window');

export default class Notification extends Component {
  constructor(props) {
    super(props);
    this.state = {
      notification: [],
      notificationLoaded: false,
    };
  }

  Notification = () => fetch('http://texotrack.com/api/user/notification.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      action: 'fetch',
    }),
  }).then(response => response.json()).then((responseJsonFromServer) => {
    console.log(responseJsonFromServer);
    this.setState({
      notification: responseJsonFromServer,
      notificationLoaded: true,
    });
  })

  componentDidMount() {
    this.Notification();
    AsyncStorage.getItem('key').then((data) => {
      const val = JSON.parse(data);
      this.setState({
        username: data.name,
        photo: data.photo,
        email: data.email,
        userId: data.id,
        address: data.address,
      });
    });
  }


  render() {
    const notificationList = this.state.notification.map(data => (
      <View key={data.msg_id} style={styles.notification}>
        <View style={{
          display: 'flex', flexDirection: 'row',
        }}
        >
          <Text style={{ color: 'green' }}><Ionicons size={20} color="green" name="ios-notifications" /></Text>
          <Text style={{
            color: '#c9c9c9', fontSize: 15, fontWeight: 'bold', marginLeft: 5,
          }}
          >
            {data.date_sent}

          </Text>
        </View>
        <View style={styles.notificationBody}>
          <Text style={{ color: '#000', fontSize: 16 }}>{data.message}</Text>
        </View>
        <View style={styles.lineStyle} />
      </View>
    ));


    return (
      <View style={styles.container}>
        <StatusBar
          style={{ height: 30 }}
          backgroundColor="black"
        />
        <View elevation={5} style={styles.headers}>
          <Text style={{
            fontSize: 25, color: 'green', textTransform: 'uppercase', fontWeight: 'bold',
          }}
          >
            Notification
          </Text>
          <Text style={styles.topIcon} onPress={this.GoHome}>
            <Ionicons name="md-home" size={25} color="black" />
          </Text>
        </View>

        <View style={{ flex: 1, margin: 5 }}>
          <ScrollView alwaysBounceVertical contentContainerStyle={{ flexGrow: 1 }} enabled bounces>
            {notificationList}
          </ScrollView>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  lineStyle: {
    borderWidth: 0.3,
    borderColor: '#c9c9c9',
    margin: 10,
  },
  headers: {
    height: 50,
    marginBottom: 10,
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    textAlignVertical: 'center',
    padding: 10,
    shadowColor: '#444',
    shadowOffset: {
      width: 0,
      height: 60,
    },
    shadowRadius: 5,
    shadowOpacity: 1.0,
    backgroundColor: '#fff',
  },
  topIcon: {
    marginTop: 3,
    fontWeight: 'bold',
  },
  content: {
    margin: 10,
    flex: 1,
  },
  notification: {
    height: 70,
    padding: 10,
  },
});

Answer 1

这就是您所说的条件渲染。这可以通过在渲染函数中使用if条件简单地实现：

render(){
    // if loading true render Loader
    if (this.state.notificationStateLoaded === true) { 
        return(
            <ActivityLoader>   
        )
    } else { // when loading false render the other component
        return(
            <WhateverComponentWhenDataHasArrived/>
        )
    }
}

React的文档非常酷。检查此官方链接进行条件渲染 https://reactjs.org/docs/conditional-rendering.html

Answer 2

我不了解您需要在map函数中做什么，但是可以在渲染器中进行条件渲染：

<View>
   {someCondition&& <Text>Hello</Text>}
</View>

其他

<View>
   {someCondition? <Text>Condition True</Text> : <Text>Condition false</Text>}
</View>