React-Native基礎(chǔ)

1.樣式設(shè)置

給每個(gè)組件設(shè)置樣式，F(xiàn)lex容器可以參考：http://www.itdecent.cn/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({
    //可以定義多個(gè)樣式，給組件使用
    container: {
        //主軸方向
        flexDirection:'row', //默認(rèn)column（列），垂直方向，row（行）水平方向
        backgroundColor: '#F5FCFF',
        flexWrap:'wrap',  //項(xiàng)目超過一行，換行
        //項(xiàng)目在主軸上的對(duì)齊方式
        //justifyContent: 'center',
        //交叉軸的對(duì)齊方式
        alignItems:'flex-start'
    },
    textStyle : {
        //width:40, //默認(rèn)的單位dp
        height:30,
        backgroundColor:'#F00',
        flex:1 //項(xiàng)目占父容器的比例
    }
});

2.組件的引入還可以采用這種方式：

var BagView = require('./BagView');
var LoginView = require('./LoginView');

export default class first extends Component {
    render() {
        return <LoginView/>
    }
}

//注冊(cè)了組件，才能正確被渲染
AppRegistry.registerComponent('first', () => first);

3.獲取本地json數(shù)據(jù)和引入系統(tǒng)控件：

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', //交叉軸，居中對(duì)齊
        width:boxWidth,
        height:100
    },
    imageStyle:{
        width:80,
        height:80
    }
});

module.exports = BagView;

4.TouchableOpacity控件

TouchableOpacity 被點(diǎn)擊之后，透明度發(fā)生改變

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號(hào)碼" style={styles.inputStyle}></TextInput>
        </View>
        <View style={styles.inputWrapperStyle}>
    <TextInput placeholder="輸入密碼" style={styles.inputStyle} keyboardType="numeric" secureTextEntry={true}></TextInput>
            </View>
            {/*可以用Button
             TouchableOpacity 被點(diǎn)擊之后，透明度發(fā)生改變
             activeOpacity，被點(diǎn)擊時(shí)的透明
             */}
            <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' //交叉軸居中對(duì)齊
    },
    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 = {};
            //當(dāng)前頁(yè)面的的指示器，橘黃色
            if(i === this.state.currentPage){
                style = {color:'orange'};
            }
            return <Text key={`text${i}`} style={[styles.circleStyle,style]}>?</Text>
        });
    }
    //滾動(dòng)的回調(diào)
    /*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);
    }

    //定時(shí)器
    startTimer = ()=>{
        this.timer = setInterval(()=>{
            //計(jì)算出要滾動(dòng)到的頁(yè)面索引，改變state
            var currentPage = ++this.state.currentPage == JsonData.data.length ? 0 : this.state.currentPage;
            this.setState({currentPage:currentPage});
            //計(jì)算滾動(dòng)的距離
            var offsetX = currentPage * ScreenWidth;
            this.refs.scrollView.scrollTo({x:offsetX,y:0,animated:true});
            console.log(currentPage);
        },2000);
    }
    //開始滑動(dòng)
    handleScrollBegin = ()=>{
        console.log("handleScrollBegin");
        clearInterval(this.timer);
    }

    handleScrollEnd = ()=>{
        console.log("handleScrollEnd");
        this.startTimer();
    }

    render() {
        return <View style={styles.container}>
            {/*注釋不能卸載<>括號(hào)里面，
             其他的事件：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>;
    }

    //定時(shí)器
    componentDidMount = ()=>{
        this.startTimer();
    }
    //取消定時(shí)器
    componentWillUnmount =() => {
        clearInterval(this.timer);
    }
}

var styles = StyleSheet.create({
    container: {
        flexDirection:'column'
    },
    imageStyle: {
        width: ScreenWidth,
        height: 120
    },
    circleWrapperStyle:{
        flexDirection:'row',
        //absolute“絕對(duì)”定位，參照標(biāo)準(zhǔn)父容器
        //relative “相對(duì)”對(duì)位，相對(duì)于原來(lái)的位置
        position:'absolute',
        bottom:0,
        left:10
    },
    circleStyle:{
        fontSize:25,
        color:'#FFF'
    }
});
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容