带有选项卡的视差在React Native中

时间:2018-11-20 07:07:18

标签: react-native

我正在尝试使用选项卡屏幕创建视差。这是我创建的屏幕:

This is the screen that I have created.

在此屏幕中,选项卡在完成列表之前向上滚动,但是我希望选项卡在列表中的列表完成之后滚动。这是代码:

      <Tabs
        prerenderingSiblingsNumber={3}
        onChangeTab={({ i }) => {
          this.setState({ height: this.heights[i], activeTab: i });
        }}
        renderTabBar={props => (
          <Animated.View
            style={[
              {
                zIndex: 1,
                width: "100%",
                backgroundColor: '#fff'
              },
              Platform.OS === "ios" ? { paddingTop: 20 } : null
            ]}
          >
            <ScrollableTab
              {...props}
              renderTab={(name, page, active, onPress, onLayout) => (
                <TouchableOpacity
                  key={page}
                  onPress={() => onPress(page)}
                  onLayout={onLayout}
                  activeOpacity={0.4}
                >
                  <Animated.View
                    style={{
                      flex: 1,
                      height: 100,
                      backgroundColor: 'grey'
                    }}
                  >
                    <TabHeading
                      scrollable
                      style={{
                        backgroundColor: "transparent",
                        width: SCREEN_WIDTH / 3
                      }}
                      active={active}
                    >
                      <Animated.Text
                        style={{
                          fontWeight: active ? "bold" : "normal",
                          color: 'black',
                          fontSize: 14
                        }}
                      >
                        {name}
                      </Animated.Text>
                    </TabHeading>
                  </Animated.View>
                </TouchableOpacity>
              )}
              underlineStyle={{ backgroundColor: this.textColor }}
            />
          </Animated.View>
        )}
      >

0 个答案:

没有答案