如何解决如何在View标签中应用react-native-swiper?
我写这篇文章是为了寻求帮助,因为事实本机扫描程序的运行不尽我所想。
第一个代码是布局代码,在容器视图中具有不同的页眉,节和页脚柔性。
第二个代码是向第一个代码的部分添加刷卡程序的代码。 我希望页眉,页脚视图大小是固定的,而扫除程序将完全打印在该部分上。
但是,该部分侵犯了页眉,页脚视图的区域,与此同时,页眉视图变小并且没有页脚视图可见。
在我仍在研究real-native时,我可能导致了错误。如果您对错误和改进方向发表评论,我将不胜感激。
感谢您阅读这篇长文章。
// Code 1
import React from 'react';
import { StyleSheet,Text,View } from 'react-native';
export default class extends React.Component {
render(){
return (
<View style={styles.container}>
{/* header */}
<View style={styles.header}>
<Text>header</Text>
</View>
{/* section */}
<View style={styles.section}>
<Text>sect</Text>
</View>
<View style={styles.footer}>
<Text>footer</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,backgroundColor: '#fff'
},header:{
flex:1.5,backgroundColor:"red"
},section:{
flex:8,backgroundColor:"yellow"
},footer:{
flex:1,backgroundColor:"blue"
}
});
- 第二个代码
import React from 'react';
import { AppRegistry,StyleSheet,View } from 'react-native'
import Swiper from 'react-native-swiper/src'
export default class extends React.Component {
render(){
return (
<View style={styles.container}>
{/* header */}
<View style={styles.header}>
<Text>header</Text>
</View>
{/* section */}
<View style={styles.section}>
<Swiper
style={styles.wrapper}
showsPagination={false}
>
<View style={styles.slide1}>
<Text style={styles.text}>Hello Swiper</Text>
</View>
<View style={styles.slide2}>
<Text style={styles.text}>Beautiful</Text>
</View>
<View style={styles.slide3}>
<Text style={styles.text}>And simple</Text>
</View>
</Swiper>
</View>
{/* header */}
<View style={styles.footer}>
<Text>footer</Text>
{/* <Header /> */}
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,backgroundColor:"blue"
},wrapper:{
},slide1: {
flex:1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#9DD6EB'
},slide2: {
flex:1,backgroundColor: '#97CAE5'
},slide3: {
flex:1,backgroundColor: '#92BBD9'
},text: {
color: '#fff',fontSize: 30,fontWeight: 'bold'
}
});
AppRegistry.registerComponent('App/',() => App)[ie][1]
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。