FlatList没有在react-native-tab-view内呈现我的数据

Question

我有一个状态this.state.mantras ，每次发布新的mantra都会更新。

我有一个带有FlatList的组件来呈现每个咒语。 但是，FlatList不会呈现任何内容。 我能够用console.log状态记录每次mantras数组的更新状态。

我有一种感觉，它是由与我试图呈现扁平化列表的react-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

上个月，我在react-native-scrollable-tab-view时遇到了问题。 原因是flatList在Android平台上的选项卡视图中没有高度。 但在ios上，效果很好。 所以我们有两个解决方案。

1. 给tabView一个高度

     <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>; 

   }