如何根据API响应动态创建一组视图

Question

I'm working on a react native application and the requirement is to create a list of views to display the booked time slots and the free slots in two different colors. The API response gives only the booked time slots. So is there a way to display a chart like a timetable to this scenario.

I have tried the following code to get the outcome. But failed.

componentDidMount() {
    return fetch("https://XXXXXXXXXXX.com")
        .then(response => response.json())
        .then((responseJson) => {
            this.setState({
                isLoading: false,
                dataSource: responseJson
            }),
            function () {
                this.arrayholder = responseJson;
            }

            renderCard = () => {
                return (
                    <View style={{ backgroundColor: 'red', 
                                   height: 100, 
                                   width: 100 }}>
                    </View>
                )
            };
        })
        .catch(error => console.log(error))
}

renderItem = (data) =>
    <TouchableOpacity
        onPress={() => {
            this.props.navigation.navigate('OfferDetails');
        }}
        style={{ borderWidth: 2, 
                 borderColor: '#02539D', 
                 height: config.deviceHeight * 0.15, 
                 justifyContent: 'center', 
                 marginLeft: config.deviceWidth * 0.05, 
                 width: config.deviceWidth * 0.9, 
                 borderRadius: 10 
        }}
    >
        <View style={{ flexDirection: 'row' }}>
            <View style={{ flex: 0.35 }}>
                <Image style={{ height: config.deviceHeight * 0.12, 
                                width: config.deviceWidth * 0.3 
                             }}
                       source={images.durdans_logo}>
                </Image>
            </View>
            <View style={{ flex: 0.65 }}>
                <View style={{ flex: 1, backgroundColor: 'red' }}></View>
            </View>
        </View>
    </TouchableOpacity>

render() {
    return (
        <View style={styles.container}>
            <SafeAreaView>
                <ScrollView horizontal={'true'}>
                    <View style={{ width: config.deviceWidth }}>
                        <ScrollView 
                            vertical={true} 
                            style={{ marginTop: config.deviceHeight * 0.03, 
                                     marginLeft: config.deviceWidth * 0.05, 
                                     marginRight: config.deviceWidth * 0.05   
                                  }
                        >
                        <FlatList
                            data={this.state.dataSource}
                            ItemSeparatorComponent={this.FlatListItemSeparator}
                            renderItem={
                                item => this.renderItem(item)}
                                enableEmptySections={true}
                                style={{ marginTop: 10 }}
                                keyExtractor={(item, index) => index.toString()
                            }
                        />
                        </ScrollView>
                    </View>
                </ScrollView>
            </SafeAreaView>
        </View>
    );
}

Is there a way to build a solution for this scenario. Thanks in advance.

Answer 1

Instead of rendering only booked time slots, render all the slots, and show it as booked or not.

eg:

renderItem = (data) =>
   data.booked?
    <TouchableOpacity
        onPress={() => {
            this.props.navigation.navigate('OfferDetails');
        }}
        style={{ borderWidth: 2, 
                 borderColor: '#02539D', 
                 height: config.deviceHeight * 0.15, 
                 justifyContent: 'center', 
                 marginLeft: config.deviceWidth * 0.05, 
                 width: config.deviceWidth * 0.9, 
                 borderRadius: 10 
        }}
    >
        <View style={{ flexDirection: 'row' }}>
            <View style={{ flex: 0.35 }}>
                <Image style={{ height: config.deviceHeight * 0.12, 
                                width: config.deviceWidth * 0.3 
                             }}
                       source={images.durdans_logo}>
                </Image>
            </View>
            <View style={{ flex: 0.65 }}>
                <View style={{ flex: 1, backgroundColor: 'red' }}></View>
            </View>
        </View>
    </TouchableOpacity>
   :
    <Text>Not Booked</Text>