Есть ли возможность сделать подзаголовок в реагировать родным с реагировать-родной-маршрутизатор-поток - PullRequest
Новая
       7

Есть ли возможность сделать подзаголовок в реагировать родным с реагировать-родной-маршрутизатор-поток

0 голосов
/ 12 июня 2018

Моя проблема в том, что я не могу сделать подзаголовок вручную из-за плоского списка.если я помещаю какой-либо контент туда, где плоский список нарушает функциональность плоского списка, он нарушается, когда я прокручиваю вниз, чтобы выполнить OnEndReached (бесконечная прокрутка), я возвращаюсь к вершине, что происходит только так, как я сказал, когда у меня есть контентна экране, кроме моего плоского списка, поэтому, почему я спрашивал, есть ли возможный способ сделать это с router-flux, может быть, таким образом у меня не возникнет этой проблемы.

Я попытался поместить вид как первыйпометить и сделать подзаголовок вручную, но он не работает.

РЕДАКТИРОВАТЬ:

Вот изображение того, что у меня есть сейчас, есть ли в любом случае, чтобы сделать горизонтальную прокрутку в подзаголовкевместо того, чтобы все вкладки были сложены

РЕДАКТИРОВАТЬ 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',
  },
});

Этопрокручиваемые вкладки

...