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上，效果很好。所以我们有两个解决方案。

给选项卡查看高度

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

2，我修改了scrollTabView，使其与使用animation.ScrollView的ios相同

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

}

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

1 个答案: