React Native和Refs-为什么此函数不返回我的内容？

Question

I have the following code in 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);

which is not returning any content from the renderCategoryTouts function.

I know that initially, this.scrollRef is undefined, so the main render function will return {null} for the {categoryTouts} variable. But after the scrollRef is set, I need it to return the results of renderCategoryTouts . How do I get this to work?

Answer 1

In renderCategoryTouts function of yours you have a variable categoryTouts variabke. You have never declared a variable like that in this function so I assume it is a global variable.

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

And in this function you're using this.state.scrollRef, this.scrollOffsetValue so you need to bind this function.(I suggest you do that in the constructor of class)

this.renderCategoryTouts = this.renderCategoryTouts.bind(this)

also in case this does not work full code would be very helpful