반응 네이티브 상태에서 scrollview 렌더링

Question

if를 사용하는 조건 이후 네이티브 응용 프로그램에 응답 할 때 scrollview를 표시해야합니다. 사실, 나는 텍스트와 제목을 포함하는 firebase의 항목 목록을 가지고 있지만 때로는 이미지도 포함 할 수 있습니다. 그 텍스트와 제목 목록을 정확히 같은 순서로 표시해야하며 이미지가 있으면 그 이미지도 표시해야합니다. 여기 코드는 내가 지금은 그것도 조건 (data.image) 검사 아니에요 그리고 항상 다른 조건 만 표시 텍스트에 직접가는 것 같습니다 것으로 보인다

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

    } 

을 사용했다. 추 신 : 저는이 튜토리얼을 사용하여 스크롤 가능한 헤더를 만들고 있습니다. 텍스트를 표시 할 때 완벽하게 작동하지만 이미지는 포함하지 않고 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> 
     ); 
    } 

에 다른 사람을 도움이되기를 바랍니다 .. 난에 대한 마지막으로 작업 한 코드는