Brief introduction of Reactnative's ScrollView

Originally wanted to write something about the ListView, but when the ScrollView implementation list is found, there are a lot of things to be aware of, and a small demo is written briefly. The function is very simple, in sliding scrollview, set up multiple pictures, each picture can click, pop up picture information.

1. Configuration

Start with a HelloWorld project and build a project.
Entrance index.android.js , jump module RnListView .

‘use strict‘;varrequire(‘react-native‘);var {  AppRegistry,} = React;varrequire(‘./list_view_module/index‘);AppRegistry.registerComponent(‘RnListView‘, () => RnListView);

2. Main project

Contains resource information, card views, batch creation, main view.

' use strict 'varReact =require(' react-native ');var{Text, View, Image, ScrollView, Touchableopacity, toastandroid,} = React//StylevarStyles =require('./style ');//PicturevarIMAGES = [require('./images/total_girls.png '),require('./images/jessicajung.png '),require('./images/kimhyoyeon.png '),require('./images/seohyun.png '),require('./images/sooyoung.png '),require('./images/sunny.png '),require('./images/taeyeon.png '),require('./images/tiffany.png '),require('./images/yoona.png '),require('./images/yuri.png '),];//NamevarNAMES = [' girls\ ' Generation ',' Jessica Jung ',' Kim hyo Yeon ',' Seo Hyun ',' Soo Young ',' Sunny ',' Taeyeon ',' Tiffany ',' Yoona ',' Yuri '];//Card ViewvarCard = React.createclass ({showtoast: function(num:i) {Toastandroid.show (Names[num].tostring (), toastandroid.short); }, Render: function() {    return(<touchableopacityStyle={Styles.button}onpress={() =                 This.showtoast (This.props.num)} ><View Style={styles.blank}/>        <ImageStyle={styles.image}ResizeMode={' cover '} Source={this.props.img}/>                                      <View Style={styles.blank}/>      </touchableopacity>); }});//Bulk Create var createcardrow = (img, i) = =<Card Key={i} img={img} num={i}/ >;varListviewmodule = React.createclass ({render: function() {    varVerticalscrollview = ( <ScrollViewStyle={Styles.container}>         {images.map (Createcardrow)}    </ScrollView> );  return verticalscrollview; }}); module.exports = Listviewmodule;

3. Card View

The outermost layer is the touch-sensitive control ( TouchableOpacity ), the touch changes transparency, contains the style and toast display, the inner view is 左右留白 , and the 中部卡片区域 . property is the num module location, img view resource.

//Card ViewvarCard = React.createclass ({showtoast: function(num:i) {Toastandroid.show (Names[num].tostring (), toastandroid.short); }, Render: function() {    return(<touchableopacityStyle={Styles.button}onpress={() =                 This.showtoast (This.props.num)} ><View Style={styles.blank}/>        <ImageStyle={styles.image}ResizeMode={' cover '}source ={this.props.img}/>                                      <View Style={styles.blank}/>      </touchableopacity>); }});

Click on onPress the event, use ()=> the callback method, or trigger directly.
By setting the blank view implementation, left and right blank, Middle match (match).

Batch setup, put the resource array IMAGES , map (map) into a dictionary array (img, pos) , set the card key and other properties.

<Card key={i} img={img} num={i}/>;

In the loop view, each independent view requires a unique key to be set individually, and a separate interface is customized. Reference
keyproperty cannot be used directly, additional incoming when the specific ID is required.

Main module, create multiple views using a picture resource.

var ListViewModule = React.createClass({  function() {    var verticalScrollView = (      <ScrollView        style={styles.container}>        {IMAGES.map(createCardRow)}      </ScrollView>    );    return verticalScrollView;  }});

4. Style

Scroll controls, each row, three controls in the row.

' use strict 'varReact =require(' react-native ');var{StyleSheet,} = React;varStyles = Stylesheet.create ({container: {flex:1,}, Button: {justifycontent:' Space-between ', Alignitems:' Center ', Flexdirection:' Row ', margin:Ten,}, Image: {flex:1, Height: $, Borderradius:5, BorderWidth:2, BorderColor:' #FF1492 ',}, blank: {width:Ten,}}); module.exports = styles;

containeris the layout of the ScrollView, set the flex properties 1 ;
buttonis the layout of each row, including left and right blank and middle view, spacing 10;
imageis the picture layout, only set high, width through Flex auto match;
blankis a blank layout with a width placeholder of 10.

JavaScript is a very clear language, Flex style is also elegant, with reactnative have a different experience. Reactnative may change the landscape of mobile development. is now maturing, but also to see the next step of development.

Github

OK, Enjoy it!

Brief introduction of Reactnative's ScrollView