Как передать реквизиты в FlatList с помощью renderScene в response-native-tab-view?

Question

Я новичок ie в 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

Я действительно не понимаю, почему

Пожалуйста, помогите мне. Большое спасибо

Answer 1

Позвольте мне прямо сказать. Вам необходимо визуализировать _renderHeader динамически на основе состояния _isFollowed. Итак, вы перешли к первому маршруту в качестве свойств вашей функции _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>
    );
}