React Native和Refs-為什么此函數不返回我的內容？

Question

我在React Native中有以下代碼：

'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變量。 您從未在此函數中聲明過像這樣的變量，因此我認為它是全局變量。

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

在此函數中，您使用this.state.scrollRef，this.scrollOffsetValue，因此您需要綁定此函數。（建議您在類的構造函數中進行此操作）

this.renderCategoryTouts = this.renderCategoryTouts.bind（this）

另外，如果這不能正常工作，那么完整的代碼將非常有幫助