我正在处理我的代码,突然ScrollView决定消失。
出于某种原因,ScrollView在字符栏视图中"正常"工作但当它在基础视图内时,它就不在那里了。
export default class CharacterSheet extends Component {
render() {
return (
<View style={{flex:1}}>
<View style={styles.TopBar}>
<View>
</View>
</View>
<View style={{flex:1}}>
<View style={styles.CharacterBar}>
</View><View style={styles.Base}>
<ScrollView style={styles.scroll}>
<View style={{paddingTop:72}}>
<View style={styles.spellsBox}>
<Text>Hi</Text>
</View>
<View style={styles.spellsBox}>
<Text>e</Text>
</View>
<View style={styles.spellsBox}>
<Text>a</Text>
</View>
<View style={styles.spellsBox}>
<Text>Hi</Text>
</View>
<View style={styles.spellsBox}>
<Text>Hi</Text>
</View>
<View style={styles.spellsBox}>
<Text>Hi</Text>
</View>
</View>
</ScrollView>
</View>
<Animated.View style={styles.CharacterStatsBar}>
</Animated.View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
CharacterBar:{
height:72,
backgroundColor:'#242527'
},
CharacterStatsBar:{
position:'absolute',
top: 72,
left: 0,
right: 0,
height:72,
backgroundColor:'#404040',
borderBottomWidth:2,
borderBottomColor:'#c53131',
borderTopWidth:1,
borderTopColor:'#838383',
},
Base:{
flex:1,
backgroundColor:'#fff',
},
scroll:{
width:'95%',
alignSelf:'center'
},
spellsBox:{
height:80,
marginTop:10,
paddingVertical:10,
borderColor:'#777',
borderWidth:3,
justifyContent:'center'
}
});
我正试图在安卓设备中运行这个
这个问题很烦人,让我有点紧张。
试着这样,不要将ScrollView包装在多个视图中。
<View style={{flex:1}}>
<View style={styles.TopBar}>
<View>
</View>
</View>
<ScrollView style={styles.scroll}>
<View style={{paddingTop:72}}>
<View style={styles.spellsBox}>
<Text>Hi</Text>
</View>
<View style={styles.spellsBox}>
<Text>e</Text>
</View>
<View style={styles.spellsBox}>
<Text>a</Text>
</View>
<View style={styles.spellsBox}>
<Text>Hi</Text>
</View>
<View style={styles.spellsBox}>
<Text>Hi</Text>
</View>
<View style={styles.spellsBox}>
<Text>byee</Text>
</View>
</View>
</ScrollView>
</View>