基于React Native官方组件ScrollView与React-Navigation实现headerTitle与界面的滑动的交互效果react-native-scrollable-contain

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_28978893/article/details/82790469

react-native-scrollable-container

基于React Native官方组件ScrollView与React-Navigation实现headerTitle与界面的滑动的交互效果

Installation

npm install react-native-scrollable-container --save

Import into your project

import ScrollContainer from 'react-native-scrollable-container';

Examle useage

static navigationOptions = ({ navigation }) => ({
  ...ThemeStyles.indexHeaderStyle,
  headerTitleStyle: {
    ...ThemeStyles.indexHeaderStyle.headerTitleStyle,
    opacity: navigation.getParam('opacity', new Animated.Value(0)),
  },
  headerTitle: navigation.getParam('title', ''),
});

<ScrollContainer title="个人中心" navigation={this.props.navigation} scrollOffset={this.state.scrollOffset}>
  <Header
    onLayout={(e) => { this.setState({ scrollOffset: e.nativeEvent.layout.height - px2dp(18) }) }}
    title="个人中心"
    iconName="cog"
    onPress={() => this.props.navigation.navigate('settings')}
  />
  {this.renderUserInfo()}
  {this.renderOptions()}
</ScrollContainer>

Properties

属性	描述	类型	默认
title	导航栏标题	PropTypes.string.isRequired	标题
scrollOffset	滑动距离阀值	PropTypes.number.isRequired	0
style	样式	PropTypes.oneOfType([ PropTypes.object, PropTypes.number ])	{ flex: 1, backgroundColor: '#F7F7F7' }
navigation	导航属性	PropTypes.object.isRequired	必填，否则无法控制导航，实现交互效果

GitHub项目地址