Question

我想在获取完成后在视图组件中显示刷卡器，这是我的代码。

    renderItem = ({ item }) => {
        return (
            <Swiper showsButtons={false} showsPagination={false} autoplay={true}>
                <TouchableOpacity onPress={this.GetItem.bind(this, item.info.title)}>
                    <ImageBackground
                        resizeMode='cover'
                        source={{ uri : "https://www.tes.com/image/" + item.info.banner}}
                        style={{width: 453, height: 230}}
                        >
                        <View>
                            <Text>
                                {item.info.category_name}
                            </Text>
                            <Text>
                                {item.info.title}
                            </Text>
                            <Text>
                                {moment(new Date(item.info.created_at * 1000)).format('dddd, D MMMM YYYY hh:mm')} WIB
                            </Text>
                        </View>
                    </ImageBackground>
                </TouchableOpacity>
                <TouchableOpacity onPress={this.GetItem.bind(this, item.news.title)}>
                    <ImageBackground
                        resizeMode='cover'
                        source={{ uri : "https://www.tes.com/image/" + item.news.banner}}
                        style={{width: 453, height: 230}}
                        >
                        <View>
                            <Text>
                                {item.news.category_name}
                            </Text>
                            <Text>
                                {item.news.title}
                            </Text>
                            <Text>
                                {moment(new Date(item.news.created_at * 1000)).format('dddd, D MMMM YYYY hh:mm')} WIB
                            </Text>
                        </View>
                    </ImageBackground>
                </TouchableOpacity>
                <TouchableOpacity onPress={this.GetItem.bind(this, item.tips.title)}>
                    <ImageBackground
                        resizeMode='cover'
                        source={{ uri : "https://www.tes.com/image/" + item.tips.banner}}
                        style={{width: 453, height: 230}}
                        >
                        <View>
                            <Text>
                                {item.tips.category_name}
                            </Text>
                            <Text>
                                {item.tips.title}
                            </Text>
                            <Text>
                                {moment(new Date(item.tips.created_at * 1000)).format('dddd, D MMMM YYYY hh:mm')} WIB
                            </Text>
                        </View>
                    </ImageBackground>
                </TouchableOpacity>
                <TouchableOpacity onPress={this.GetItem.bind(this, item.story.title)}>
                    <ImageBackground
                        resizeMode='cover'
                        source={{ uri : "https://www.tes.com/image/" + item.story.banner}}
                        style={{width: 453, height: 230}}
                        >
                        <View>
                            <Text>
                                {item.story.category_name}
                            </Text>
                            <Text>
                                {item.story.title}
                            </Text>
                            <Text>
                                {moment(new Date(item.story.created_at * 1000)).format('dddd, D MMMM YYYY hh:mm')} WIB
                            </Text>
                        </View>
                    </ImageBackground>
                </TouchableOpacity>
            </Swiper>
        )
    }

    componentDidMount() {
        return fetch('https://www.tes.com/site/load-headline')
          .then((response) => response.json())
          .then((responseJson) => {
            this.setState({
              isLoading: false,
              dataSource: responseJson.data,
            }, function() {
              // In this block you can do something with new state.
            });
          })
          .catch((error) => {
            console.error(error);
          });
      }

render() {
    return (
            {
                this.state.isLoading ? <ActivityIndicator /> : false
            }
            <View style={{flexDirection: "column", padding: 10}}>
                {this.renderItem}
            </View>
          )
         }

但是它不起作用。在此之前，我先使用FlatList，然后再使用其属性renderItem并可以使用。但是现在我不想使用FlatList，我需要使用Swiper。那么，如何在获取完成后如何呈现滑动器以供查看？

请帮助

Answer 1

render() {
return (
        <View>
        {
            this.state.isLoading ? (<ActivityIndicator />) : (<View 
             style={{flexDirection: "column", padding: 10}}>
            {this.renderItem}
        </View>)
        }
        </View>
      )
     }

可能是可行的。

Answer 2

条件运算符的位置不正确。

返回中不需要小括号。您必须指定视图区域。

return this.state.isLoading === true ? (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <ActivityIndicator size="large" />
      </View>
    ) : (
     <View style={{flex:1,flexDirection: "column", padding: 10 }}>
                {this.renderItem}
            </View> );

在React-Native中获取和渲染组件

2 个答案: