React-native-swiper method for setting the height (setting the height of the RN carousel image)

:

Solution:

1. layer view on the swiper label coat

 <View style = {styles. Container}> <Swiper style = {styles. wrapper} Height = {width * 40/75} autoplaytimeout = {2.5} // showbuttons -- whether to display the Left and Right paging buttons showsbuttons = {false} // autoplay -- whether to play autoplay = {true} // paginationstyle -- the style of the container that contains the dot, it is used to adjust the position paginationstyle = {styles. paginationstyle} // dotstyle -- dot style dotstyle = {styles. dotstyle} // activedotstyle -- activedotstyle = {styles. activedotstyle }> <Image Source = {require ('.. /img/mainswiper/swiper1.jpg ')} style = {styles. bannerimg}/> <Image Source = {require ('.. /img/mainswiper/swiper2.jpg ')} style = {styles. bannerimg}/> <Image Source = {require ('.. /img/mainswiper/swiper3.jpg ')} style = {styles. bannerimg}/> </swiper></View> 

2. Set the height in the view style.

 Const Styles = Stylesheet. Create ({Container: {backgroundcolor:  "# F3f3f3", height: width * 40/75  ,},Bannerimg: {Height: width * 40 / 75 , Width: width ,}, wrapper: {width: width ,}, paginationstyle :{}, dotstyle: {width:  22  , Height:  3  , Backgroundcolor:  '  # Fff  '  , Opacity:  0.4  , Borderradius:  0  ,}, Activedotstyle: {width:  22 , Height:  3  , Backgroundcolor:  '  # Fff  '  , Borderradius:  0  ,},}); 

 

3. Do not use flex in the style.

 

4. The full version of the carousel Image Code (the following is the code content of mainswiper. JS)

Import react, {component} from 'react 'import swiper from 'react-native-swiper'; import {image, view, stylesheet,Dimensions, } From 'react-native '; Let {width} = dimensions. Get ('window '); Class mainswiper extends component {render () {return ( <View style = {styles. Container}> <Swiper style = {styles. wrapper} Height = {width * 40/75} autoplaytimeout = {2.5} // showbuttons -- whether to display the Left and Right paging buttons showsbuttons = {false} // autoplay -- whether to play autoplay = {true} // paginationstyle -- the style of the container that contains the dot, it is used to adjust the position paginationstyle = {styles. paginationstyle} // dotstyle -- dot style dotstyle = {styles. dotstyle} // activedotstyle -- activedotstyle = {styles. activedotstyle }> <Image Source = {require ('.. /img/mainswiper/swiper1.jpg ')} style = {styles. bannerimg}/> <Image Source = {require ('.. /img/mainswiper/swiper2.jpg ')} style = {styles. bannerimg}/> <Image Source = {require ('.. /img/mainswiper/swiper3.jpg ')} style = {styles. bannerimg}/> </swiper></View> ) }} Const styles = stylesheet. Create ({ Container: {backgroundcolor: "# f3f3f3", height: width * 40/75 ,}, Bannerimg: {Height: width * 40/75, width: width,}, wrapper: {width: width,}, paginationstyle: {}, dotstyle: {width: 22, height: 3, backgroundcolor: '# fff', opacity: 0.4, borderradius: 0,}, activedotstyle: {width: 22, height: 3, backgroundcolor:' # fff', borderradius: 0 ,},}); export default mainswiper;

React-native-swiper method for setting the height (setting the height of the RN carousel image)