Извлечение и рендеринг компонента в React-Native

Question

Я хочу отобразить компонент Swiper в представлении после завершения выборки, это мой код.

    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. Итак, как я могу отобразить swiper для просмотра после завершения выборки?

Пожалуйста, помогите

Answer 1

Оператор «Условие» находится в неправильном положении.

При возврате не требуется маленьких скобок. Вы должны указать область просмотра.

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

Answer 2

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

Это может быть работа.