反応ネイティブの条件の後にスクロールビューをレンダリングします。

Question

ifを使用した条件の後で、反応したネイティブアプリケーションでスクロールビューを表示する必要があります。実際に、私はテキストとタイトルを含むfirebaseの項目のリストを持っていますが、時には画像も含むことがあります。テキストとタイトルのリストを正確に同じ順序で表示する必要があります。ここで私は

_renderScrollViewContent() { 
      const data = this.state.items 
       if (data.image) { 
        return (
         <View> 
          {data.map((item, i) => 
           <View key={i}> 
            <Image source={require('path')}/> 
           <Text>{item.image}</Text> 

           <Text>{item.title}</Text> 
           <Text>{item.text} </Text> 
          </View> 
         )} 
        </View> 
       ); 

      } 
      else 
      { 
       return (
        <View> 
         {data.map((item, i) => 
          <View key={i} style={styles.row}> 
           <Text>{item.image}</Text> 
           <Text>{item.title}</Text> 
           <Text>{item.text} </Text> 
          </View> 
         )} 
        </View> 
       ); 
      } 
     } 



render() { 
     const headerHeight = this.state.scrollY.interpolate({ 
      inputRange: [0, HEADER_SCROLL_DISTANCE], 
      outputRange: [HEADER_MAX_HEIGHT, HEADER_MIN_HEIGHT], 
      extrapolate: 'clamp', 
     }); 
     const imageOpacity = this.state.scrollY.interpolate({ 
      inputRange: [0, HEADER_SCROLL_DISTANCE/2, HEADER_SCROLL_DISTANCE], 
      outputRange: [1, 1, 0], 
      extrapolate: 'clamp', 
     }); 
     const imageTranslate = this.state.scrollY.interpolate({ 
      inputRange: [0, HEADER_SCROLL_DISTANCE], 
      outputRange: [0, -50], 
      extrapolate: 'clamp', 
     }); 
     return (
      <View style={styles.fill}> 
       <ScrollView 
        style={styles.fill} 
        scrollEventThrottle={16} 
        onScroll={Animated.event(
         [{nativeEvent: {contentOffset: {y: this.state.scrollY}}}] 
          )} 
       > 
        {this._renderScrollViewContent()} 
       </ScrollView>  
     ); 

    } 

を使用したコードは、私は今ではそれも条件（data.image）をチェックしていないようだし、常にテキストのみelse条件やディスプレイに直接行くようです。 PS：私はこのチュートリアルを使ってスクロール可能なヘッダーを作成していますが、テキストを表示するには問題ありませんが、画像は入れませんhttps://medium.com/appandflow/react-native-scrollview-animated-header-10a18cb9469e。もし条件を削除した場合、私は常に項目間の空白を取得また ..どんな提案

Answer 1

ので、私はそれが将来

_renderScrollViewContent() { 
     var productList = []; 
     this.state.items.forEach(function (item) { 
      if (!item.image) { 
       productList.push(
        <View key={item.key}> 
         <Text>{item.title}</Text> 
         <Text>{item.text}</Text> 
         <Text>{item.image}</Text> 
        </View> 
       ); 
      } 
      else { 
       productList.push(
        <View key={item.key}> 
         <Text>{item.title}</Text> 
         <Text>{item.text}</Text> 
         <Text>{item.image}</Text> 
         <Image source={require('path')}> 
          <View> 
           <Text>{item.legend}</Text> 
          </View> 
         </Image> 
        </View> 
       ); 
      } 
     }.bind(this)); 
     return (
      <View> 
       {productList } 
      </View> 
     ); 
    } 

に他の誰かを助けることを願っています..私のために最終的に働いていたコードです