React Native和Refs - 爲什麼此功能不會返回我的內容？

Question

我有以下代碼中反應天然：

'use strict' 

import React, { Component } from 'react'; 
import { AppRegistry, Animated, Dimensions, Easing, Image, Text, View, StyleSheet, TouchableOpacity, ScrollView } from 'react-native'; 

const categoryTwoLinks = [ 
    { label: 'Subcategory1' }, 
    { label: 'Subcategory2' }, 
    { label: 'Subcategory3' }, 
    { label: 'Subcategory4' }, 
    { label: 'Subcategory5' }, 
    { label: 'Subcategory6' }, 
] 

const categoryTouts = [ 
    { image: require('./assets/images/image01.jpg'), title: 'Category1' }, 
    { image: require('./assets/images/image02.jpg'), title: 'Category2', links: categoryTwoLinks }, 
    { image: require('./assets/images/image03.jpg'), title: 'Category3' }, 
] 

class Tout extends Component { 
    render() { 
    console.log('tout') 
    return (
     <Image 
     source={this.props.image} 
     ratioGrow 
     alignItems='center' 
     style={{ alignItems: 'center', justifyContent: 'center' }} 
     > 
     <Text 
      style={{ color: 'white', fontSize: 24, backgroundColor: 'transparent', fontWeight: 'bold' }} 
     > 
      {this.props.title} 
     </Text> 
     </Image> 
    ) 
    } 
} 

export default class scrollAccordion extends Component { 

    handleScroll = ({ nativeEvent: { contentOffset } }: Object) => { 
    const scrollY = contentOffset.y 
    this.scrollOffsetValue.setValue(scrollY) 
    } 

    setScrollRef = node => { 
    console.log('set scroll ref') 
    if (node) { 
     this.scrollRef = node 
    } 
    } 

    renderCategoryTouts =() => { 
    console.log('render category tout') 
    categoryTouts.map((tout, index) => { 
     return (
     <Tout 
      key={tout.title} 
      {...tout} 
      scrollViewRef={this.state.scrollRef} 
      scrollOffset={this.scrollOffsetValue} 
     /> 
    ) 
    }) 
    } 

    render() { 
    console.log('render') 
    let categoryTouts = this.scrollRef ? this.renderCategoryTouts() : null 
    return (
     <View style={styles.container}> 
     <ScrollView 
      scrollEventThrottle={1} 
      ref={this.setScrollRef} 
      onScroll={this.handleScroll} 
     > 
      <View> 
      {categoryTouts} 
      </View> 
     </ScrollView> 
     </View> 
    ) 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    alignItems: 'center', 
    justifyContent: 'center', 
    paddingTop: 40, 
    backgroundColor: 'white', 
    }, 
    toutText: { 
    color: 'white', backgroundColor: 'transparent', fontWeight: 'bold', fontSize: 24 
    } 
}); 

AppRegistry.registerComponent('scrollAccordion',() => scrollAccordion); 

未返回從renderCategoryTouts功能的任何內容。

我知道最初this.scrollRef是未定義的，所以主渲染函數將爲{categoryTouts}變量返回{null}。但scrollRef設置後，我需要它返回renderCategoryTouts的結果。我如何得到這個工作？

Answer 1

在您的renderCategoryTouts函數中，您有一個變量categoryTouts variabke。你從來沒有在這個函數中聲明過這樣的變量，所以我認爲它是一個全局變量。

renderCategoryTouts =() => { 
    categoryTouts.map((tout, index) => { 
     return (
     <Tout 
      key={tout.title} 
      {...tout} 
      scrollViewRef={this.state.scrollRef} 
      scrollOffset={this.scrollOffsetValue} 
     /> 
    ) 
    }) 
    } 

而且在你使用this.state.scrollRef此功能，this.scrollOffsetValue所以你需要這個功能進行綁定。（我建議你做，在類的構造函數）

這一點。 renderCategoryTouts = this.renderCategoryTouts.bind（本）

情況下也並不全職工作的代碼將是非常有益