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

Posted 2023-02-22

【中文标题】FlatList 没有在 react-native-tab-view 中呈现我的数据

【英文标题】：FlatList is not rendering my data inside react-native-tab-view

【发布时间】：2019-10-18 14:44:15

【问题描述】：

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

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

我有一种感觉，它是由我试图在其中呈现平面列表的 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>
);

【问题讨论】：

当我删除 包装器并按原样添加 SecondRoute 组件时，它会成功呈现

尝试使用 扭曲 ，如果不起作用，请尝试在 FlatList 中添加 extraData=this.state，可能对您有所帮助

@OzgeCokyasar 你解决了这个问题吗？

【参考方案1】：

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

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