React本机ListView中的最后一项未完全显示
React本机ListView中的最后一项未完全显示
提问于 2017-05-29 01:40:25
到目前为止，我的问题是:我从推特流API获得推文，所以新的数据被附加到ListView的底部，但是最后一项没有完整显示，即最后一行文本(文本元素)，我没有办法向下滚动看到那一行。
我渲染ListView的代码是：
renderRealtimeSearch() {
return (
<View
tabLabel='Realtime Search'
style={{padding: 10}}
>
<TextInput
style={{height: 40}}
placeholder="Type search query..."
onChangeText={(txt) => this.setState({query: txt})}
/>
<Button
onPress={() => this.handleStreamClick()}
style={styles.buttonStyle}
title='Submit query'
/>
{this.state.isStreamOn && <View style={{height: 515}}>
<ListView
ref='list'
onLayout={(event) => {
var layout = event.nativeEvent.layout;
this.setState({
listHeight : layout.height
});
}}
style={styles.realTweetsListView}
dataSource={this.state.realtimeTweets}
renderRow={(rowData) => {
console.log(rowData.text);
return (
<View>
<View style={styles.container}>
<Image source={{uri: rowData.avatar_url}} style={styles.photo}/>
<Text style={styles.title}>{rowData.author_name}</Text>
</View>
<View>
<Text style={styles.text}>{rowData.text}</Text>
<Text style={styles.date}>{`${rowData.date_time.week_day}, ${rowData.date_time.date}/${rowData.date_time.month}/${rowData.date_time.year} ${rowData.date_time.time} GTM`}</Text>
<Text style={styles.link}>{rowData.tweet_url}</Text>
</View>
</View>
);
}
}
renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
renderFooter={() => {
return (
<View onLayout={(event)=>{
var layout = event.nativeEvent.layout;
this.setState({
footerY : layout.y
});
}}>
</View>
);
}}
/>
</View>
}
</View>
);
}在主渲染函数中(以防这个错误由ScrollableTabView引起)
render() {
return (
<ScrollableTabView
renderTabBar={() => <DefaultTabBar />}
ref={(tabView) => { this.tabView = tabView; }}
>
{this.renderTwitterSearch()}
{this.renderRealtimeSearch()}
{this.renderDBSearch()}
</ScrollableTabView>
);
}
}回答 2
Stack Overflow用户
回答已采纳
发布于 2017-05-29 04:12:46
如果它对其他人有帮助，我会发布一个解决方案:为了使这段代码工作，我将ListView及其子元素包装到ScrollView元素中，因此代码将如下所示：
renderRealtimeSearch() {
return (
<View
tabLabel='Realtime Search'
style={{padding: 10}}
>
<TextInput
style={{height: 40}}
placeholder="Type search query..."
onChangeText={(txt) => this.setState({query: txt})}
/>
<Button
onPress={() => this.handleStreamClick()}
style={styles.buttonStyle}
title='Submit query'
/>
{this.state.isStreamOn && <ScrollView style={{height: 520}}>
<ListView
renderScrollComponent={props => <InvertibleScrollView {...props} inverted />}
style={styles.realTweetsListView}
dataSource={this.state.realtimeTweets}
renderRow={(rowData) => {
return (
<ScrollView>
<View style={styles.container}>
<Image source={{uri: rowData.avatar_url}} style={styles.photo}/>
<Text style={styles.title}>{rowData.author_name}</Text>
</View>
<View>
<Text style={styles.text}>{rowData.text}</Text>
<Text style={styles.date}>{`${rowData.date_time.week_day}, ${rowData.date_time.date}/${rowData.date_time.month}/${rowData.date_time.year} ${rowData.date_time.time} GTM`}</Text>
<Text style={styles.link}>{rowData.tweet_url}</Text>
</View>
</ScrollView>
);
}
}
renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
/>
</ScrollView>
}
</View>
);
}Stack Overflow用户
发布于 2018-08-31 04:31:10
您可以简单地在列表视图的根组件上添加一个带有flex=1的样式属性。
<View style={{flex: 1}}>
<ListView
style={{paddingBottom: 5, marginBottom: 0}}
enableEmptySections
dataSource={this.state.albums}
renderRow={album => <AlbumDetail key={album.title}
album={album}/>}
/>
</View>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44230205
复制相关文章
相似问题