Use React-native to make a simple application-06 Product interface Implementation

The product interface is simple to implement and is actually a ListView use:

The use of the ListView has been described in detail in the official documentation. I'm going to raise a hole here.

The ListView has a different effect on Android and iOS, and the ListView support for iOS is good, but it's not supported for many Android properties. Some local official documents are also ambiguous, so if you want to do cool on and drop effects, it is recommended to do iOS.

Here's a look at the code:

1' Use strict '2 3 varReact = require (' react-native '))4Import Icon from ' React-native-vector-icons/fontawesome '5Import Aniimage from '. /components/aniimage '6Import Aniroll from '. /components/aniroll '7 var {8 Image,9 ListView,Ten StyleSheet, One Text, A View, - touchableopacity, - Navigator, the Proptypes -} =React -  - varRequest_url = ' http://192.168.6.5:8888/getCommidity ' +  - class Commodity extends React.component { +Static Proptypes = { A Navigator:PropTypes.object, at Fetch:PropTypes.func -   }; - Constructor (props) { - Super (props) -      This. State = { -DataSource:NewListview.datasource ({ inRowhaschanged: (row1, row2) = Row1!==Row2 -       }), toLoadedfalse +     } -   } the Componentdidmount () { *      This. Fetchdata () $   }Panax Notoginseng  - Fetchdata () { the Fetch (Request_url) +. Then ((response) =Response.json ()) A. then ((responsedata) = { the        This. SetState ({ +DataSource: This. State.dataSource.cloneWithRows (responsedata), -Loadedtrue $       }) $     }) - . Done () -   } the  - render () {Wuyi     if(! This. state.loaded) { the       return  This. Renderloadingview () -     } Wu  -     return ( About<ListView $Initiallistsize={3} -datasource={ This. State.datasource} -renderrow={ This. Rendercommidity.bind ( This)} -Style={styles.listview}/> A     ) +   } the  - Renderloadingview () { $     return ( the<view style={styles.txtcontainer}> the<aniroll inputrange={[0, 1]} outputrange={[' 0deg ', ' 10000deg ']} style={{width:50, height:50}}/> the<Text> the Loading Graphics ...  -</Text> in</View> the     ) the   } About  the rendercommidity (commidities) { the     return ( the<view Style={styles.container} > +<image style={styles.viewtopimage} source={require ('.. /assets/listbg.png ')}> -<touchableopacity onpress={ This. Tocommodityscreen.bind ( This, commidities)}> the<AniimageBayitype={' Image '} theInputrange={[0, 100]} theOutputrange={[0, 1]} -style={styles.aniimage} -url={' http://192.168.6.5:8888/getImage?imgName= ' + commidities.imgpath1}/> the</TouchableOpacity> the</Image> the<view style={styles.viewtxtcontent}> the<TouchableOpacity> -<text style={styles.txtcontent}>{commidities.title}</text> the</TouchableOpacity> the</View> the<view style={styles.viewbottom}>94<view style={styles.viewbottomleft}> the<icon name= ' heart-o ' size={20}/> the<text Style={styles.txtcontent} >{commidities.love}</Text> the</View>98<view style={styles.viewbottomright}> About<view style={styles.viewbottomrightcontainer}> -<icon name= ' clock-o ' size={20}/>101<text Style={styles.txtcontent} >{commidities.date}</Text>102</View>103</View>104</View> the<image Source={require ('.. /assets/splite.png ')} style={styles.imagesplit}/>106</View>107     )108   }109  the Tocommodityscreen (commidities) {111     varcommodity =commidities theLet navigator = This. Props.navigator113Navigator.push ({id: ' Commodityscreen '), SceneConfig:Navigator.SceneConfigs.HorizontalSwipeJump, Passprop: {Commodity}}) the   } the } the 117 varStyles =stylesheet.create ({118 container: {119Flex:1, -Flexdirection: ' column ',121BackgroundColor: ' #ffffff '122   },123 Txtcontainer: {124Flex:1, theAlignitems: ' Center ',126Justifycontent: ' Center ',127BackgroundColor: ' #fffff ' -   },129 aniimage: { theheight:330,131WidthNULL the   },133 viewtopimage: {134height:330,135WidthNULL,136Margin:10137   },138 txtcontent: {139Fontsize:16, $Marginleft:5141   },142 viewtxtcontent: {143Marginleft:10,144Marginright:10,145Marginbottom:5,146Flex:1147   },148 Txtbottom: {149Flex:1, MaxFontsize:12151   }, the Viewbottom: {153Marginleft:10,154Marginright:10,155Marginbottom:5,156Flex:1,157Flexdirection: ' Row '158   },159 imagesplit: { theflex:0.3,161BackgroundColor: ' #F0F0F0 '162   },163 Numbertext: {164Fontsize:15,165Marginleft:20166   },167 viewbottomleft: {168Flex:1,169Flexdirection: ' Row ' the   },171 viewbottomright: {172Flex:1,173Alignitems: ' Flex-end '174   },175 Viewbottomrightcontainer: {176Flex:1,177Flexdirection: ' Row '178   }179 }) the 181Module.exports = Commodity

First, the construction method:

1 Constructor (props) {2    super (props)3this     . state = { 4       New Listview.datasource ({5         rowhaschanged: (row1, row2) = Row1!== row26        }),7       false8    }9   }

DataSource is the data source of the ListView, and loaded determines whether the data is loaded.

Second, Fetchdata method

Gets the interface data of the ListView, after the data request is completed, the re-render interface sets loaded to True

Iii. Methods of Tocommodityscreen

Enter the Product Details screen.

Use React-native to make a simple application-06 Product interface Implementation