Question

我的问题是，由于平面列表，我无法手动执行子标题。如果我把平板列表的任何内容放到平面列表的功能中，当我滚动到底部进行OnEndReached（无限滚动）时，我会回到顶部，这只会像我说的那样，当我有内容时在我的平板电脑旁边的屏幕上，这就是为什么我要问路由器是否有可能用路由器焊剂这样做我可能不会有这个问题。

我尝试将View作为第一个标记并执行手动的子标题，但它不起作用。

编辑：

Here is the image of what i have now, is there anyway to do horizontal scroll in the subheader instead of having all the tabs stacked

编辑2：我使用这个插件解决了它： https://github.com/react-native-community/react-native-tab-view。这是我的代码：

import * as React from 'react';
import { Component } from 'react';
import { View, Dimensions, StyleSheet } from 'react-native';
import  PostsList  from '../../postsList';

import { TabView, TabBar, SceneMap } from 'react-native-tab-view';

const FirstRoute = () => (
  <View>
    <PostsList />
  </View>
);
const SecondRoute = () => (
  <View style={[{ backgroundColor: '#673ab7' }]} />
);

const ThirdRoute = () => (
  <View style={[{ backgroundColor: '#673ab7' }]} />
);

const FourRoute = () => (
  <View style={[{ backgroundColor: '#673ab7' }]} />
);

const FiveRoute = () => (
  <View style={[{ backgroundColor: '#673ab7' }]} />
);

const initialLayout = {
  height: 0,
  width: Dimensions.get('window').width,
};

 export default class Home extends Component {
  constructor() {
    super();
    this.state = {
      isData: true,
      index: 0,
      routes: [
        { key: 'first', title: 'First' },
        { key: 'second', title: 'Second' },
        { key: 'third', title: 'Third' },
        { key: 'four', title: 'Four' },
        { key: 'five', title: 'Five' },
      ]
    };

  }

  _renderTabBar = props => (
    <TabBar
      {...props}
      scrollEnabled
      indicatorStyle={styles.indicator}
      style={styles.tabbar}
      tabStyle={styles.tab}
      labelStyle={styles.label}
    />
  );

  _renderScene = SceneMap({
    first: FirstRoute,
    second: SecondRoute,
    third: ThirdRoute,
    four: FourRoute,
    five: FiveRoute
  })

  _handleIndexChange = index =>
  this.setState({
    index,
  });

  render() {
    return (

      <TabView
        navigationState={this.state}
        renderTabBar={this._renderTabBar}
        renderScene={this._renderScene}
        onIndexChange={this._handleIndexChange}
        initialLayout={initialLayout}
      />
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  tabbar: {
    backgroundColor: '#3f51b5',
  },
  tab: {
    width: 120,
  },
  indicator: {
    backgroundColor: '#ffeb3b',
  },
  label: {
    color: '#fff',
    fontWeight: '400',
  },
});

This is the scrollable tabs

有没有一种方法可以使用react-native-router-flux生成一个subheader

0 个答案: