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

Question

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

我有一个带有 FlatList 的组件来呈现每个咒语。然而，FlatList 没有渲染任何东西。我能够控制台记录每次记录咒语数组更新状态的状态。

我有一种感觉，它是由我试图在其中呈现平面列表的 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 时遇到了这个问题。原因是 android 平台上的选项卡视图中的 flatList 没有高度。但在 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>;
   

   }