Как показать заголовок при прокрутке вверх и скрыть заголовок при прокрутке вниз на FlatList

Question

Теперь я хочу создать, точно так же, как приложение Facebook, панель, отображаемую над моим tabNavigator. Эти вкладки скрываются при прокрутке вниз и отображаются при прокрутке вверх. И теперь я использую FlatList, но у компонента FlatList есть опция ListHeaderComponent для рендеринга его заголовка, который также скрывается при прокрутке вниз. (потому что он сверху, поэтому нужно прокрутить до начала, чтобы увидеть его, не очень удобно с моим очень длинным элементом списка)

Пожалуйста, помогите мне любую идею.

Answer 1

Плоский список предоставляет вам верхний и нижний колонтитулы. Вы должны сделать это вручную. Я нашел одну ссылку, которая связана со складной навигационной панелью.

https://medium.com/appandflow/react-native-collapsible-navbar-e51a049b560a

https://expo.io/@janic/collapsible-navbar этого lnk есть демоверсия. так что вы можете проверить это здесь

может это полезно!

Answer 2

[...]

const NAVBAR_HEIGHT = 64;
const STATUS_BAR_HEIGHT = Platform.select({ ios: 20, android: 24 });

class App extends Component {

  [...]

  render() {
    return (
      <View style={styles.fill}>
        <Flatlist
          contentContainerStyle={styles.contentContainer}
          dataSource={this.state.dataSource}
          renderRow={this._renderRow}
        />
        <View style={styles.navbar}>
          <Text style={styles.title}>
            PLACES
          </Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  navbar: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    alignItems: 'center',
    backgroundColor: 'white',
    borderBottomColor: '#dedede',
    borderBottomWidth: 1,
    height: NAVBAR_HEIGHT,
    justifyContent: 'center',
    paddingTop: STATUS_BAR_HEIGHT,
  },
  contentContainer: {
    paddingTop: NAVBAR_HEIGHT,
  },
  [...]
});

[...]