呈現滾動視圖後，在條件反應原生

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。 此外，如果刪除if條件，我總是得到項目之間的空格..任何建議

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

代碼