1.样式设置
给每个组件设置样式，Flex容器可以参考：http://www.jianshu.com/p/f378459e285e
export default class first extends Component {
render() {
return (
文本1
文本2
文本3
);
}
}
const styles = StyleSheet.create({
//可以定义多个样式，给组件使用
container: {
//主轴方向
flexDirection:'row', //默认column（列），垂直方向，row（行）水平方向
backgroundColor: '#F5FCFF',
flexWrap:'wrap', //项目超过一行，换行
//项目在主轴上的对齐方式
//justifyContent: 'center',
//交叉轴的对齐方式
alignItems:'flex-start'
},
textStyle : {
//width:40, //默认的单位dp
height:30,
backgroundColor:'#F00',
flex:1 //项目占父容器的比例
}
});
2.组件的引入还可以采用这种方式：
var BagView = require('./BagView');
var LoginView = require('./LoginView');
export default class first extends Component {
render() {
return 3.获取本地json数据和引入系统控件：
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
Image
} from 'react-native';
//获取屏幕的宽度
var Dimensions = require('Dimensions');
var width = Dimensions.get('window').width;
var boxWidth = width / 3;
var JsonData = require('./test.json');
class BagView extends Component{
renderBags = ()=>{
return JsonData.data.map((item,i) => {
return
{item.title}
});
}
render(){
return
{this.renderBags()}
;
}
}
var styles = StyleSheet.create({
container:{
flexDirection:'row',
flexWrap:'wrap' //换行
},
wrapperStyle:{
flexDirection:'column', //主轴，垂直方向
alignItems:'center', //交叉轴，居中对齐
width:boxWidth,
height:100
},
imageStyle:{
width:80,
height:80
}
});
module.exports = BagView;
4.TouchableOpacity控件
TouchableOpacity 被点击之后，透明度发生改变
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
Image,
TextInput,
TouchableOpacity
} from 'react-native';
//获取屏幕的宽度
var Dimensions = require('Dimensions');
var ScreenWidth = Dimensions.get('window').width;
class LoginView extends Component{
handlePress = ()=>{
console.log("press");
}
render() {
return
{/*可以用Button
TouchableOpacity 被点击之后，透明度发生改变
activeOpacity，被点击时的透明
*/}
登录
;
}
}
var styles = StyleSheet.create({
container: {
flexDirection: 'column', //主轴
alignItems: 'center' //交叉轴居中对齐
},
iconStyle: {
width: 80,
height: 80,
borderRadius: 40,
borderWidth: 2,
borderColor: '#FFF',
marginTop: 50,
marginBottom: 30
},
inputWrapperStyle: {
flexDirection: 'row'
},
inputStyle: {
flex: 1, //填满父容器
textAlign: 'center'
},
textWrapperStyle:{
flexDirection:'row',
backgroundColor:'#87CEFA',
marginLeft:15,
marginRight:15,
borderRadius:8,
height:30,
width:ScreenWidth-30,
marginTop:20
}
});
module.exports = LoginView;
5.ScrollView控件
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ScrollView
} from 'react-native';
var Dimensions = require('Dimensions');
var ScreenWidth = Dimensions.get('window').width;
class MyScrollView extends Component {
renderChilds = ()=> {
var data = ['red', 'green', 'blue', 'yellow'];
return data.map((item, i)=> {
return
{i}
;
});
}
render() {
return
{/*子元素*/}
{this.renderChilds()}
;
}
}
module.exports = MyScrollView;
6.BannerView
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ScrollView,
Image
} from 'react-native';
var Dimensions = require('Dimensions');
var ScreenWidth = Dimensions.get('window').width;
var JsonData = require('./test2.json');
//http://www.dongnaoedu.com/jason/
var BaseUrl = 'http://10.0.2.2:8080/react-server/';
class BannerView extends Component {
constructor(props){
super(props);
this.state = {
currentPage:0
};
}
//渲染图片列表
renderChilds = ()=> {
return JsonData.data.map((item, i)=> {
return •
});
}
//滚动的回调
/*handleScroll = (e)=>{
var x = e.nativeEvent.contentOffset.x;
if(x % ScreenWidth == 0){
var currentPage = Math.floor(e.nativeEvent.contentOffset.x / ScreenWidth);
this.setState({currentPage:currentPage});
//console.log(currentPage);
}
}*/
handleScroll = (e)=>{
var x = e.nativeEvent.contentOffset.x;
var currentPage = Math.floor(e.nativeEvent.contentOffset.x / ScreenWidth);
this.setState({currentPage:currentPage});
console.log("currentPage:"+currentPage);
}
//定时器
startTimer = ()=>{
this.timer = setInterval(()=>{
//计算出要滚动到的页面索引，改变state
var currentPage = ++this.state.currentPage == JsonData.data.length ? 0 : this.state.currentPage;
this.setState({currentPage:currentPage});
//计算滚动的距离
var offsetX = currentPage * ScreenWidth;
this.refs.scrollView.scrollTo({x:offsetX,y:0,animated:true});
console.log(currentPage);
},2000);
}
//开始滑动
handleScrollBegin = ()=>{
console.log("handleScrollBegin");
clearInterval(this.timer);
}
handleScrollEnd = ()=>{
console.log("handleScrollEnd");
this.startTimer();
}
render() {
return
{/*注释不能卸载<>括号里面，
其他的事件：http://blog.csdn.net/liu__520/article/details/53676834
ViewPager onPageScoll onPageSelected onScroll={this.handleScroll}*/}
{/*子元素*/}
{this.renderChilds()}
{this.renderCircles()}
;
}
//定时器
componentDidMount = ()=>{
this.startTimer();
}
//取消定时器
componentWillUnmount =() => {
clearInterval(this.timer);
}
}
var styles = StyleSheet.create({
container: {
flexDirection:'column'
},
imageStyle: {
width: ScreenWidth,
height: 120
},
circleWrapperStyle:{
flexDirection:'row',
//absolute“绝对”定位，参照标准父容器
//relative “相对”对位，相对于原来的位置
position:'absolute',
bottom:0,
left:10
},
circleStyle:{
fontSize:25,
color:'#FFF'
}
});