javascript - 如何根据 API 响应 React Native 动态创建一组视图

Question

我正在开发一个反应本机应用程序，要求是创建一个视图列表，以两种不同的颜色显示预订的时隙和空闲时隙。API 响应仅提供预订的时间段。那么有没有办法在这种情况下显示一个像时间表一样的图表。

我已经尝试了以下代码来获得结果。但是失败了。

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>
    );
}

有没有办法为这种情况构建解决方案。提前致谢。

Answer 1

不是只渲染预订的时间段，而是渲染所有的时间段，并将其显示为已预订或未预订。

例如：

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>