react-native-scrollable-container v1.0.0

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