添加额外的按钮到动画标题

时间:2018-06-03 01:06:08

标签: react-native

当标题栏在滚动时缩小时,如何在标题的左/右侧放置额外的按钮。我在这里遵循了这个例子:https://snack.expo.io/SkK4P4UC-

我在哪里按下按钮

<View style={styles.container}>
  <Animated.View style={[styles.header, {
     paddingHorizontal: screenWidth * 0.05,
     width: screenWidth,
     height: scrollOffset.interpolate({
      inputRange: [0, 200],
      outputRange: [120, 64],
      extrapolate: 'clamp',
     }),
    },
  ]}>
     <Animated.Text
        onLayout={e => {
          if (this.offset === 0 && this.state.titleWidth === 0) {
            const titleWidth = e.nativeEvent.layout.width;
            this.setState({ titleWidth });
          }
        }}
        style={{
          fontWeight: 'bold',
          fontSize: scrollOffset.interpolate({
            inputRange: [0, 200],
            outputRange: [26, 20],
            extrapolate: 'clamp',
          }),
        }}>
        Header Title Here
     </Animated.Text>
     <Animated.View
        style={{
           width: scrollOffset.interpolate({
             inputRange: [0, 200],
             outputRange: [screenWidth * 0.9 - this.state.titleWidth, 0],
             extrapolate: 'clamp',
           }),
        }}
     />
   </Animated.View>

   <ScrollView
      style={{ flex: 1, width: '100%' }}
      contentContainerStyle={{ width: '100%' }}
      onScroll={this.onScroll}
      scrollEventThrottle={20}>
     {this.getListItems(9)}
   </ScrollView>
 </View>

0 个答案:

没有答案