如何解决我如何在React Native中的视图中使用滚动视图
我如何在视图内使用滚动视图,我试图在视图内添加滚动视图,但它隐藏了样式图标
class HomeScreen extends Component {
render()
{
return (
<View style = {styles.container}>
<View style= {styles.category}>
<ScrollView horizontal={true}>
<View style={styles.categoryIcons} >
<Icon name="md-restaurant" size={35} color="#75DA8B">
</Icon>
</View>
<View style={styles.categoryIcons}>
<Icon name="md-fast-food" size={35} color="#75DA8B">
</Icon>
</View>
</ScrollView>
</View>
</View>
);
}
}
常量样式= StyleSheet.create({ 容器: { 高度:“ 93%”, 宽度:“ 100%”, }
flexview:{
flexDirection:'row',justifyContent:'space-between'
}
})
解决方法
import React,{ Component } from 'react';
import { StyleSheet,Text,View,ScrollView } from 'react-native';
class App extends Component {
render() {
const { container,welcome,instructions } = styles;
return (
<View style={container}>
<ScrollView style={[container,{flexDirection: 'row'}]} horizontal={true}>
<Text style={welcome}>App</Text>
<Text style={instructions}>To get started,edit App</Text>
<View style={{ backgroundColor: 'red',width: '90%',justifyContent: 'center',alignSelf: 'center',height: 100,}}>
</View>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,backgroundColor: '#F5FCFF',},welcome: {
fontSize: 20,textAlign: 'center',margin: 10,instructions: {
textAlign: 'center',color: '#333333',marginBottom: 5,});
export default App;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。