FlatList не рендерит мои данные в режиме реакции-родной-вкладки

Question

У меня есть состояние this.state.mantras, которое обновляется каждый раз, когда я публикую новую mantra.

У меня есть компонент с FlatList для рендеринга каждой из мантр.Однако FlatList ничего не рендерит.Я в состоянии console.log о состоянии, в котором каждый раз регистрируется обновленное состояние массива мантр.

У меня такое ощущение, что это вызвано чем-то, что связано с реакции-native-tab-view, в котором я нахожусьпытаясь сделать плоский список.

SecondRoute = () => (
    <FlatList
      keyExtractor={(item, index) => index.toString()}
      numColumns={1}
      data={this.state.mantras}
      renderItem={this._renderItem}
    />
)

render() {
 console.log(this.state) <-- success
  return (
   <TabView
    renderTabBar={props =>
      <TabBar
        bounces
        {...props}
        style={styles.tabStyle}
      />
    }
    navigationState={this.state}
    renderScene={SceneMap({
      second: this.SecondRoute, <--- fails to render, no errors
    })}
    onIndexChange={index => this.setState({ index })}
    initialLayout={{ width: Dimensions.get('window').width }}
   />
  )
 }

_renderItem = ({item, index}) => (
  <View>
   <View style={styles.mantraCard} key={item.id}>
   <Text style={styles.title}>{item.title}</Text>
   <Text style={styles.description}>{item.description}</Text>
   </View>
  </View>
);

Answer 1

в прошлом месяце я столкнулся с проблемой при реакции-native-scrollable-tab-view. причина в том, что у flatList нет высоты в виде вкладок на платформе Android. но на ios это работает хорошо. поэтому у нас есть два решения.

1. дать вкладке View высоту

      <ScrollableTabView
      style={{ height: 300 }
       initialPage={0}                    
       }
     >
     // you list view
    </ScrollableTabView>
   

   2, я изменяю scrollTabView, сделал то же самое с ios, которые используют animated.ScrollView

    renderScrollableContent() {
   {
   const scenes = this._composeScenes();
   return <Animated.ScrollView
   horizontal
   pagingEnabled
   automaticallyAdjustContentInsets={false}
   contentOffset={{ x: this.props.initialPage * this.state.containerWidth, 
   }}
   ref={(scrollView) => { this.scrollView = scrollView; }}
   onScroll={Animated.event(
     [{ nativeEvent: { contentOffset: { x: this.state.scrollXIOS, }, }, }, 
   ],
     { useNativeDriver: true, listener: this._onScroll, }
   )}
   onMomentumScrollBegin={this._onMomentumScrollBeginAndEnd}
   onMomentumScrollEnd={this._onMomentumScrollBeginAndEnd}
   scrollEventThrottle={16}
   scrollsToTop={false}
   showsHorizontalScrollIndicator={false}
   scrollEnabled={!this.props.locked}
   directionalLockEnabled
   alwaysBounceVertical={false}
   keyboardDismissMode="on-drag"
   {...this.props.contentProps}
   >
     {scenes}
   </Animated.ScrollView>;
   

   }