次のような反応するネイティブ コンポーネントがあります。
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;