我有一个 react 原生组件,如:
import React, { Component } from 'react';
import { StyleSheet, Text, View, ScrollView } from 'react-native';
import Level from './Level';
class LevelList extends Component {
render() {
return (
<ScrollView style={styles.scrollView} >
<View style={styles.levelList}>
<Level />
<Level />
<Level />
<Level />
<Level />
<Level />
</View>
</ScrollView>
)
}
}
var styles = StyleSheet.create({
scrollView: {
backgroundColor: '#fff',
flex: 1,
},
levelList: {
marginTop: 50,
flexDirection:'column',
alignItems: 'center',
},
})
export default LevelList;
这里
<Level>
只是一个包含文本的组件。我有
<LevelList>
在我的容器中,例如:class LevelListView extends Component {
render() {
return (
<View style={{flex: 1}}>
<Header />
<LevelList />
</View>
)
}
}
export default LevelListView
在这里,我在列表的一侧看到一个滚动条,但它没有滚动。
我在这里错过了什么?
我在模拟器中运行该应用程序:
更新:
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
class Header extends Component {
render() {
return (
<View style={styles.toolbar}>
<Text style={styles.toolbarBack}>Back</Text>
<Text style={styles.toolbarTitle}>Levels</Text>
</View>
)
}
}
var styles = StyleSheet.create({
toolbar:{
backgroundColor:'#00bcd4',
paddingTop:10,
paddingBottom:10,
flexDirection:'row'
},
toolbarTitle:{
color:'#fff',
textAlign:'center',
fontSize:20,
fontWeight:'bold',
marginRight: 30,
flex:1
},
toolbarBack: {
color: '#fff',
fontSize: 14,
fontWeight: 'bold',
marginTop: 4,
marginLeft: 10,
}
})
export default Header;
最佳答案
我遇到了同样的问题并尝试了互联网上的所有内容,例如 flex:1 解决方案...但问题是,Android 不允许您使用带有 ScrollView 的嵌套滚动。我只是说:
nestedScrollEnabled={true}
命令到我的 ScrollView 对象,它就像一个魅力。
关于react-native - react 原生android ScrollView 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37453924/