React Native 和 Refs - 为什么这个功能不是 return 我的内容？

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

这不是 returning 来自 renderCategoryTouts 函数的任何内容。

我知道最初 this.scrollRef 是未定义的，所以主渲染函数将为 {categoryTouts} 变量 return {null}。但是设置 scrollRef 后，我需要它 return 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 所以你需要绑定这个函数。（我建议你在 class 的构造函数中这样做）

this.renderCategoryTouts = this.renderCategoryTouts.bind(这个)

如果这不起作用，完整的代码将非常有帮助

React Native 和 Refs - 为什么这个功能不是 return 我的内容？

React Native and Refs - Why does this function not return my content?

javascript

reactjs

react-jsx

react-native