gam*_*mer 5 react-native react-native-scrollview
我有一个反应本机组件,例如:
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;
Run Code Online (Sandbox Code Playgroud)
这<Level>
只是一个保存文本的组件。
<LevelList>
我的容器中有这样的:
class LevelListView extends Component {
render() {
return (
<View style={{flex: 1}}>
<Header />
<LevelList />
</View>
)
}
}
export default LevelListView
Run Code Online (Sandbox Code Playgroud)
在这里,我的列表一侧有一个滚动条,但它没有滚动。我在这里缺少什么?
我正在模拟器中运行该应用程序:
更新:
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;
Run Code Online (Sandbox Code Playgroud)
小智 4
我遇到了同样的问题,并尝试了互联网上的所有解决方案,例如 flex:1 解决方案...但问题是,Android 不允许您将嵌套滚动与滚动视图一起使用。我刚刚提出:
nestedScrollEnabled={true}
Run Code Online (Sandbox Code Playgroud)
命令我的滚动视图对象,它就像一个魅力。
归档时间: |
|
查看次数: |
3909 次 |
最近记录: |