提问人：Ozge Cokyasar 提问时间：6/3/2019 更新时间：6/3/2019 访问量：3041
FlatList 没有在 react-native-tab-view 中呈现我的数据
FlatList is not rendering my data inside react-native-tab-view
问：
我有一个状态，每次我发布新的.this.state.mantrasmantra
我有一个带有 FlatList 的组件来呈现每个咒语。但是，FlatList 不会呈现任何内容。我能够控制台.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>
);
答：
0赞
Lenoarod
6/3/2019
#1
上个月，我在react-native-scrollable-tab-view时遇到了问题。原因是 flatList 在 android 平台上的选项卡视图中没有高度。但在 iOS 上，它运行良好。所以我们有两个解决方案。
给 tabView 一个高度
<ScrollableTabView style={{ height: 300 } initialPage={0} } > // you list view </ScrollableTabView>2、我修改了scrollTabView，使其与使用动画的ios相同。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>;}
评论