Почему response-native не отображает весь контент, когда в него включены 2 метода render?

Question

У меня есть контент, который должен быть отображен условно, и некоторый фиксированный контент, то есть нижний колонтитул. Я не хочу отображать нижний колонтитул каждый раз, когда изменяется состояние, поэтому я добавил два метода renderContent () и renderFooter , которые будут вызываться в render () метод .

Ниже кода не отображаются оба метода.

'use strict';

import React, { Component } from 'react';
import { Alert, FlatList, View, StyleSheet, Text, Linking, Button } from 'react-native';
import { AsyncStorage } from 'react-native';
import getEnvVars from '../environment';
const { apiUrl } = getEnvVars();
import Moment from 'moment';
import { Ionicons } from '@expo/vector-icons';
import FootBar from '../screens/FootBar';
import { LinesLoader } from 'react-native-indicator';

export default class SubscriptionsToEnd extends Component {
    static navigationOptions = ({ navigation }) => {
        const { state } = navigation;

        return {
            title: `${state.params && state.params.title ? state.params.title : 'Subscriptions Due'}`,
        };
    };

    constructor(props) {
        super(props);
        this.state = {
            isLoaded: false,
            dataSource: [],
            title: 'Subscriptions Due'
        };
    }

    componentDidMount() {
        this._getAllCustomers();
    }

    _getAllCustomers() {
        let url;
        if (this.state.title === 'Subscriptions Due') {
            url = apiUrl + "/customersWithSubscriptionNearToEnd/";
            this.props.navigation.setParams({ title: 'Subscriptions Due' })
        }
        if (this.state.title === 'Customers') {
            url = apiUrl + "/customers/";
            this.props.navigation.setParams({ title: 'Customers' })
        }

        this.setState({ isLoaded: false })

        try {
            AsyncStorage.multiGet(['role', 'jwt']).then((data) => {
                let role = data[0][1];
                let jwt = data[1][1];
                if (role === 'Admin') {
                    fetch(url, {
                        method: 'GET',
                        headers: {
                            'Content-Type': 'application/json',
                            'jwt': jwt
                        },
                    }).then(res => res.json())
                        .then(
                            (result) => {
                                if (result.message != 'Unauthorized user!' && this.state.title === 'Customers') {
                                    this.setState({
                                        isLoaded: true,
                                        dataSource: result,
                                        title: 'Subscriptions Due'

                                    });
                                } else if (result.message != 'Unauthorized user!' && this.state.title === 'Subscriptions Due') {
                                    this.setState({
                                        isLoaded: true,
                                        dataSource: result,
                                        title: 'Customers'

                                    });
                                } else if (result.message === 'Unauthorized user!') {
                                    this.props.navigation.navigate('Login');
                                }
                            },
                            (error) => {
                                console.log(error);
                                this.setState({
                                    isLoaded: true
                                });
                                this.props.navigation.navigate('Login');
                            }
                        )
                }
            })

        } catch (error) {
            console.log('Error at getting token \n' + error)
        }
    }

    GetGridViewItem(id) {
        Alert.alert(id);
    }

    _logOutAsync = async () => {
        await AsyncStorage.clear();
        this.props.navigation.navigate('Auth');
    };

    _addCustomer() {
        // TBD
    }

    renderContent() {
        if (!this.state.isLoaded) {
            return (
                <View style={styles.loader}>
                    <LinesLoader color='#1d91a5' barWidth={5} barHeight={60} barNumber={5} betweenSpace={5} />
                </View>
            )
        }

        if (this.state.isLoaded) {
            return (
                <View style={styles.container}>
                    <View style={styles.grid}>
                        <FlatList
                            data={this.state.dataSource}
                            renderItem={({ item }) =>
                                <View style={styles.GridViewContainer}>
                                    <Text style={styles.GridViewTextLayout}>
                                        <Text onPress={this.GetGridViewItem.bind(this, item._id)}>
                                            <Text style={styles.Name}>{item.firstname}</Text> <Text style={styles.Name}>{item.lastname}</Text> {"\n"}
                                            <Text>{Moment(item.till_date).format('Do MMM YYYY')} </Text>{"\n\n"}
                                        </Text>
                                        <Text onPress={() => { Linking.openURL('tel:+44' + item.mobile); }}><Ionicons name="md-phone-portrait" size={22} color="#1d91a5" />  {item.mobile}</Text> {"\n\n"}
                                        <Text><Ionicons name="md-mail" size={22} color="#1d91a5" />{item.email}</Text>
                                    </Text>
                                </View>}
                            numColumns={2}
                            keyExtractor={(item, index) => index.toString()}
                        />
                    </View >
                </View>
            )
        };
    }
    renderFooter() {
        return (
            <View style={styles.buttonsContainer}>
                <View style={styles.button}>
                    <Button color='#1d91a5' title={this.state.title} onPress={this._getAllCustomers.bind(this)} />
                </View>
                <View style={styles.button}>
                    <Button color='#1d91a5' title="+Customer" onPress={this._addCustomer.bind(this)} />
                </View>
                <View style={styles.button}>
                    <Button color='#1d91a5' title="Logout" onPress={this._logOutAsync.bind(this)} />
                </View>
            </View>
        );
    }

    render() {
        return (
            this.renderContent(),
            this.renderFooter()
        );
    }

}

Приведенный выше код отображает только метод this.renderFooter () . Если я поменяю методы в render (), он отобразит this.renderContent () .

Может кто-нибудь сказать мне, почему он не может отрендерить оба?

Answer 1

Похоже, вы поняли это до того, как я смог опубликовать свой ответ.

Функция возврата может возвращать только один вид. Ваши 2 функции возвращают представление. Таким образом, объединение обеих функций в одном представлении решает проблему.

Answer 2

Я делал это неправильно.Метод main render () должен выглядеть следующим образом:

    render() {
        return (
            <View style={styles.wrapper}>
                {this.renderContent()}
                {this.renderFooter()}
            </View>

        );
    }