React-Native基础

作者: 贾里 | 来源:发表于2017-06-10 17:59 被阅读21次

1.样式设置

给每个组件设置样式，Flex容器可以参考：http://www.jianshu.com/p/f378459e285e

export default class first extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={[styles.textStyle,{backgroundColor:'#0F0',flex:2}]}>
                    文本1
                </Text>
                <Text style={[styles.textStyle,{height:30,alignSelf:'flex-end'}]}>
                    文本2
                </Text>
                <Text style={[styles.textStyle,{height:50}]}>
                    文本3
                </Text>
            </View>
        );
    }
}

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 <LoginView/>
    }
}

//注册了组件，才能正确被渲染
AppRegistry.registerComponent('first', () => first);

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 <View key={'wrapper'+i} style={styles.wrapperStyle}>
                <Image source={require('../images/danjianbao.png')} style={styles.imageStyle}></Image>
                <Text>{item.title}</Text>
            </View>
        });
    }
    render(){
        return <View style={styles.container}>
            {this.renderBags()}
        </View>;
    }
}

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 <View style={styles.container}>
    <Image source={require('../images/icon.png')} style={styles.iconStyle}></Image>
        <View style={styles.inputWrapperStyle}>
    <TextInput placeholder="输入QQ号码" style={styles.inputStyle}></TextInput>
        </View>
        <View style={styles.inputWrapperStyle}>
    <TextInput placeholder="输入密码" style={styles.inputStyle} keyboardType="numeric" secureTextEntry={true}></TextInput>
            </View>
            {/*可以用Button
             TouchableOpacity 被点击之后，透明度发生改变
             activeOpacity，被点击时的透明
             */}
            <TouchableOpacity
        activeOpacity={0.5}
        onPress={this.handlePress}>
    <View style={styles.textWrapperStyle}>
    <Text style={{color:'#fff',flex:1,textAlign:'center',alignSelf:'center'}}>登录</Text>
        </View>
        </TouchableOpacity>

        </View>;
    }
}


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 <View key={`item${i}`} style={{backgroundColor:item,width:ScreenWidth,height:200}}>
                <Text>{i}</Text>
            </View>;
        });
    }

    render() {
        return <ScrollView
            horizontal={true}
            showsHorizontalScrollIndicator={false}
            pagingEnabled={true}>
            {/*子元素*/}
            {this.renderChilds()}
        </ScrollView>;
    }
}

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 <Image key={`item${i}`} source={{uri:BaseUrl+item.img}} style={styles.imageStyle}></Image>;
        });
    }
    //渲染圆
    renderCircles = ()=>{
        return JsonData.data.map((item, i)=> {
            var style = {};
            //当前页面的的指示器，橘黄色
            if(i === this.state.currentPage){
                style = {color:'orange'};
            }
            return <Text key={`text${i}`} style={[styles.circleStyle,style]}>•</Text>
        });
    }
    //滚动的回调
    /*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 <View style={styles.container}>
            {/*注释不能卸载<>括号里面，
             其他的事件：http://blog.csdn.net/liu__520/article/details/53676834
            ViewPager onPageScoll onPageSelected onScroll={this.handleScroll}*/}
            <ScrollView
                ref="scrollView"
                horizontal={true}
                showsHorizontalScrollIndicator={false}
                pagingEnabled={true}                
                onMomentumScrollBegin={this.handleScroll}
                onScrollBeginDrag={this.handleScrollBegin}
                onScrollEndDrag={this.handleScrollEnd}>             
                {/*子元素*/}
                {this.renderChilds()}
            </ScrollView>
            <View style={styles.circleWrapperStyle}>
                {this.renderCircles()}
            </View>
        </View>;
    }

    //定时器
    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'
    }
});

React-Native基础

1.样式设置

2.组件的引入还可以采用这种方式：

3.获取本地json数据和引入系统控件：

4.TouchableOpacity控件

5.ScrollView控件

6.BannerView

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读