参照官方例子练习组件的使用,练习View Image Text 还有Android平台的DrawerLayoutAndroid
效果图:
React-Native 中的 width,height的 100%
在React-Native 中没有百分比这样的宽高,但是有替代的,具体见 issue
flex:1
相当于 height:100%
alignSelf:'stretch'
相当于 width:100%
React-Native 的style
- 直接写在View中
<Text style={{fontFamily: 'notoserif', fontStyle: 'italic', fontWeight: 'bold'}}>
NotoSerif Bold Italic
</Text>
- 使用 StyleSheet.createClass 创建
var styles = StyleSheet.create({
base: {
width: 38,
height: 38,
},
background: {
backgroundColor: '#222222',
},
active: {
borderWidth: 2,
borderColor: '#00ff00',
},
});
- 以上两种混合
<Text style={[styles.remainder, {color: '#a1a1a1'}]}>
simple text
</Text>
Flex
DrawerLayoutAndroid侧滑菜单
DrawerLayoutAndroid
只在android中,它的 renderNavigationView
代表侧滑菜单内容, 子View代表主界面布局
通过ref={(drawer) => { this.drawer = drawer; }}
获取drawer
对象
打开: openDrawer()
关闭: closeDrawer()
<DrawerLayoutAndroid
drawerWidth={300}
drawerPosition={DrawerLayoutAndroid.positions.Left}
ref={(drawer) => { this.drawer = drawer; }}
renderNavigationView={() => navigationView}>
<View></View>
</DrawerLayoutAndroid>
按钮的点击效果
根据需要的效果选择
点击函数的触发
定义函数
openDrawer: function () {
this.drawer.openDrawer();
},
设置点击事件
onPress={this.openDrawer}
完整代码
/**
* hanks
* https://github.com/hanks-zyh
*/
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
Image,
DrawerLayoutAndroid,
ProgressBarAndroid,
ScrollView,
ListView,
TouchableOpacity,
} = React;
var AwesomeProject = React.createClass({
openDrawer: function () {
this.drawer.openDrawer();
},
getInitialState:function(){
var ds = new ListView.DataSource( {rowHasChanged: (r1, r2) => r1 !== r2} );
return {
dataSource : ds.cloneWithRows(['CLOTHES','PACKAGES','SHOES',]),
}
},
render: function() {
var navigationView = (
<View style={{flex: 1, backgroundColor: '#fff'}}>
<Image source= {{ uri: 'http://img.hb.aicdn.com/735afbfa2f6fee24d1a10e1a22b23c63f707ea82281c3-ajdFRe_fw658' }} style={{ height:200 }} />
<ListView
dataSource={this.state.dataSource}
renderRow={ (rowData) =>
<View style={{
height: 56,
flexDirection : 'row',
alignItems:'center',
paddingLeft: 20,
}}>
<Image source = { require('./img/list4.png') } style={{ height:10, width:10, margin:8 }}/>
<Text style={ styles.listItem }>{rowData}</Text>
</View>
}
/>
</View>
);
return (
<DrawerLayoutAndroid
drawerWidth={300}
drawerPosition={DrawerLayoutAndroid.positions.Left}
ref={(drawer) => { this.drawer = drawer; }}
renderNavigationView={() => navigationView}
>
<ScrollView contentContainerStyle={styles.contentContainer}>
<View>
<View style = {{
backgroundColor: '#f4ec34',
height:54,
flexDirection:'row',
justifyContent:'space-between',
alignItems:'center',
paddingLeft: 20,
paddingRight:20,
}}>
<TouchableOpacity onPress={this.openDrawer}>
<Image source={require('./img/list4.png')} style={{ width: 20, height: 20}} />
</TouchableOpacity>
<Text style={{ fontSize:18, color:'#484848' }}>SHOP</Text>
<Image source={require('./img/search.png')} style={{ width: 20, height: 20}} />
</View>
<Image source= {{ uri: 'http://img.hb.aicdn.com/cbf3ebcae08ef62ef02dd61aa2407414dc64e794150313-KRUD1s_fw658' }}
style={{ height: 220, margin: 20}} />
<Text style={{ fontSize:16, color:'#484848', alignSelf:'center' }}>HOT PRODUCTS</Text>
<View style={ styles.photoRow }>
<View>
<Image source= {{ uri: 'https://gw.alicdn.com/bao/uploaded/TB1YQAPKVXXXXa9XFXXwu0bFXXX.png_270x270Q90.jpg' }}
style={ styles.photoItem } />
<Text style={styles.photoName }>TEL ORGES</Text>
<Text style={styles.photoPrice }>$99</Text>
</View>
<View>
<Image source= {{ uri: 'https://gw.alicdn.com/bao/uploaded/TB1DteFKVXXXXXQapXXSutbFXXX.jpg_270x270Q90.jpg' }}
style={ styles.photoItem } />
<Text style={styles.photoName}>ARFL JUYHS</Text>
<Text style={styles.photoPrice }>$34.2</Text>
</View>
<View>
<Image source= {{ uri: 'https://gw.alicdn.com/bao/uploaded/TB1dQGTKVXXXXaaXVXXSutbFXXX.jpg_270x270Q90.jpg' }}
style={ styles.photoItem } />
<Text style={styles.photoName}>TKLL ORGES</Text>
<Text style={styles.photoPrice }>$182</Text>
</View>
</View>
<Text style={{ fontSize:16, color:'#484848', alignSelf:'center' , marginTop:20 }}>NEW COLLECTIONS</Text>
<View style={ styles.photoRow }>
<View>
<Image source= {{ uri: 'https://gw.alicdn.com/bao/uploaded/TB1rzGNKVXXXXbGXVXXSutbFXXX.jpg_270x270Q90.jpg' }}
style={ styles.photoItem } />
<Text style={styles.photoName}>TEL ORGES</Text>
<Text style={styles.photoPrice }>$99</Text>
</View>
<View>
<Image source= {{ uri: 'https://gw.alicdn.com/bao/uploaded/TB1rzGNKVXXXXbGXVXXSutbFXXX.jpg_270x270Q90.jpg' }}
style={ styles.photoItem } />
<Text style={styles.photoName}>ARFL JUYHS</Text>
<Text style={styles.photoPrice }>$34.2</Text>
</View>
<View>
<Image source= {{ uri: 'https://gw.alicdn.com/bao/uploaded/TB1uBUxKVXXXXcGXpXXSutbFXXX.jpg_270x270Q90.jpg' }}
style={ styles.photoItem } />
<Text style={styles.photoName}>TKLL ORGES</Text>
<Text style={styles.photoPrice }>$182</Text>
</View>
</View>
<Text style={{ fontSize:16, color:'#484848', alignSelf:'center' , marginTop:20 }}>MOST POP</Text>
<View style={ styles.photoRow }>
<View>
<Image source= {{ uri: 'https://gw.alicdn.com/bao/uploaded/TB1Rqa3KVXXXXb6XpXXSutbFXXX.jpg_270x270Q90.jpg' }}
style={ styles.photoItem } />
<Text style={styles.photoName}>TEL ORGES</Text>
<Text style={styles.photoPrice }>$99</Text>
</View>
<View>
<Image source= {{ uri: 'https://gw.alicdn.com/bao/uploaded/TB1Rqa3KVXXXXb6XpXXSutbFXXX.jpg_270x270Q90.jpg' }}
style={ styles.photoItem } />
<Text style={styles.photoName}>ARFL JUYHS</Text>
<Text style={styles.photoPrice }>$34.2</Text>
</View>
<View>
<Image source= {{ uri: 'https://gw.alicdn.com/bao/uploaded/TB1lMksKVXXXXa7XpXXSutbFXXX.jpg_270x270Q90.jpg' }}
style={ styles.photoItem } />
<Text style={styles.photoName}>TKLL ORGES</Text>
<Text style={styles.photoPrice }>$182</Text>
</View>
</View>
</View>
</ScrollView>
</DrawerLayoutAndroid>
);
}
});
var styles = StyleSheet.create({
contentContainer: {
},
listItem:{
},
photoRow:{
flexDirection:'row',
justifyContent: 'space-between',
paddingLeft: 20,
paddingRight: 20,
marginTop:10,
},
photoItem:{
height: 120,
width:90 ,
alignItems: 'stretch' ,
alignSelf:'center'
},
photoName:{
fontSize:14,
color:'#f39d7f',
alignSelf:'center',
},
photoPrice:{
fontSize:12, color:'#484848', alignSelf:'center'
},
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
文章出处:http://hanks.xyz