0

我是 React Native 的新手，并试图将道具传递ListHeaderComponent给FlatList

这是代码：

const FirstRoute = (props) => {
  const _renderHeader = () => {
    return(
      <View>
        {props.isFollowed && 
        <TouchableOpacity onPress={props.onSubmit}>
          <Text>You have followed this person</Text>
        </TouchableOpacity> } 
    </View>
    )
  }
  return(
    <View style={[styles.scene, { backgroundColor: '#ff4081' }]}>
    <FlatList
      data={data}
      keyExtractor={item => item.id}
      renderItem={itemData => ( <Image source={itemData.item.id} style={{height: WIDTH/3, width: WIDTH/3}} />)}
      ListHeaderComponent={_renderHeader}
    />
  </View>
  )
};

const SecondRoute = () => (
  <View style={[styles.scene, { backgroundColor: '#673ab7' }]} />
);

const initialLayout = { width: Dimensions.get('window').width };

export default function Parent() {
  const [index, setIndex] = React.useState(0);
  const [routes] = useState([
    { key: 'first', title: 'First' },
    { key: 'second', title: 'Second' },
  ]);
  const [_isFollowed, setIsFollowed] = useState(false);
  const _onSubmit = () => {
    ...
    setIsfollowed(true)

  }

  const renderScene = ({route}) => {
    switch(route.key){
      case 'first': return <FirstRoute {...props} onSubmit={_onSubmit} isFollowed={_isFollowed} />
      case 'second': return <SecondRoute  {...props} />
    }
  };

  return (
    <TabView
      navigationState={{ index, routes }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={initialLayout}
    />
  );
}

但是当我保存它时，屏幕会记录错误：找不到 isFollowed 的值

我认为问题在于我传递道具的方式。我还在学习它。因为当我删除 时ListHeaderComponent，FlatList仍然可以很好地生成图像列表。而且不知道有没有关系renderScene

我真的不明白为什么

请帮我。非常感谢

4

1 回答 1

0

让我说清楚。您需要根据 _isFollowed 状态动态渲染 _renderHeader。因此，您将 _onSubmit 函数和 _isFollowed 状态作为道具传递给第一个路由，以便在 _renderHeader 处访问它们。正确的？

正如我所见，一旦您的 _renderHeader 可以直接访问 _isFollowed 状态和 _onSubmit 函数，您实际上就不需要这样做。尝试如下：

export default function Parent() {
  const [index, setIndex] = React.useState(0);
  const [routes] = useState([
    { key: 'first', title: 'First' },
    { key: 'second', title: 'Second' },
  ]);

  const [_isFollowed, setIsFollowed] = useState(false);

  const initialLayout = { width: Dimensions.get('window').width };

  function _onSubmit() {
    setIsFollowed(true);
  }

  function _renderHeader() {
    return (
      <View>
        {_isFollowed && 
        <TouchableOpacity onPress={_onSubmit}>
          <Text>You have followed this person</Text>
        </TouchableOpacity> } 
      </View>
    );
  }

  const FirstRoute = () => {
    return(
      <View style={[styles.scene, { backgroundColor: '#ff4081' }]}>
      <FlatList
        data={data}
        keyExtractor={item => item.id}
        renderItem={itemData => ( <Image source={itemData.item.id} style={{height: WIDTH/3, width: WIDTH/3}} />)}
        ListHeaderComponent={_renderHeader}
      />
    </View>
    )
  };

  const SecondRoute = () => (
    <View style={[styles.scene, { backgroundColor: '#673ab7' }]} />
  );



  const renderScene = ({route}) => {
    switch(route.key){
      case 'first': return <FirstRoute />
      case 'second': return <SecondRoute />
    }
  };

  return (
    <TabView
      navigationState={{ index, routes }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={initialLayout}
    />
  );
}

另一点我在您的代码中不理解并且无法检查因为我没有尝试运行它是下面的函数：

function _renderHeader() {
    return (
      <View>
        {_isFollowed && 
        <TouchableOpacity onPress={_onSubmit}>
          <Text>You have followed this person</Text>
        </TouchableOpacity> } 
      </View>
    );
  }

如果你想渲染 TouchableOpacity 以防 _isFollowed 为真，你应该使用三元运算符，如下所示：

function _renderHeader() {
    return (
        <View>
          {_isFollowed ?  
             <TouchableOpacity onPress={_onSubmit}>
               <Text>You have followed this person</Text>
             </TouchableOpacity> } 
           : <></>
          }
        </View>
    );
}
于 2020-05-06T18:24:50.213 回答