React Native_React Native组件

Text组件

设置Text文字水平垂直居中显示

export default class Test4 extends Component{
    render(){
        return(
          <View style={styles.container}>
              <Text style={styles.textStyle} numberOfLines={3}>我是文字</Text>
          </View>
        );
    }
}
const styles = StyleSheet.create({
   container: {
       flex:1,
       backgroundColor:'#F5FCFF',
       justifyContent:'center'
   },
    textStyle:{
        backgroundColor:'red',
        //使text组件文字水平垂直居中
        // 方法一：行高
        // lineHeight:150,
        // height:150,
        // textAlign:'center',

        //方法二：
        // height:150,
        // textAlignVertical:'center',//文字垂直方向 iOS没用 安卓好用
        // textAlign:'center',

        //方法三：text组件外面包裹一层View组件，设置View组件的style
        // flexDirection:'row',
        // justifyContent:'center',
        // alignItems:'center'

        //方法四：
        height:150,
        paddingTop:60,
        paddingBottom:60,
        textAlign:'center',
    }
});

Image组件

export default class Test4 extends Component{
    render(){
        return(
          <View style={styles.container}>
             <Text>
                 加载项目中的图片
             </Text>
             <Image  source={require('./img/oldDoctor.png')} style={styles.imageStyle} ></Image>

             <Text>
                  加载App中的图片
             </Text>

              <Image source={{uri:'icon'}} style={styles.imageStyle}></Image>
             <Text>
                  加载网络上的图片
             </Text>
              <Image source={{uri: 'http://e.hiphotos.baidu.com/image/pic/item/03087bf40ad162d9a62a929b1ddfa9ec8b13cd75.jpg'}} style={styles.imageStyle}></Image>
          </View>
        );
    }
}
const styles = StyleSheet.create({
   container: {
       flex:1,
       backgroundColor:'#F5FCFF',
       justifyContent:'center',
       alignItems:'center'
   },
    imageStyle:{
        width:80,
        height:80,
        resizeMode:'contain',
    }
});

注意加载App中的图片iOS需要把图片放到Xcode中的Images.xcassets中

出现的问题：
1、jpg格式的文件使用<Image source={require('./img/oldDoctor.png')} style={styles.imageStyle} ></Image>会报错

2、iOS模拟器不显示网络上面的图片

遗留问题待以后解决。

拓展:

怎么查看console.log();

打开iOS模拟器，使用快捷键commond+d
点击Debug JS Remotely，会自动打开浏览器网页，然后点击审查，点击console进行查看

九宫格练习

App.js

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';

//引入数据
var Data = require('./Data.json');
//定义一些全局变量
var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window');
var cols = 3;
var boxW = 100;
var vMargin = (width -cols * boxW) /(cols +1);
var hMargin = 25;

export default class Test4 extends Component{
    render(){
        return(
          <View style={styles.container}>
              <View style={styles.viewStyel}>
                  {this.renderAllBaoBao()}
              </View>
          </View>
        );
    }

    //返回View中所有的包包的函数
    renderAllBaoBao(){
        console.log(Data.length);
        //1.装包包的数组
        var images =[];
        //2.遍历数据
        for(var i=0;i<Data.length;i++){

            //3.取出Data中的json
            var dataItem = Data[i];
            images.push(
              <View key={i} style={styles.outViewStyle}>
                  <Image source={{uri:dataItem['icon']}} style={styles.imageStyle}></Image>
                  <Text>{dataItem['name']}</Text>
              </View>
            );

        }
        //最后返回这个数组
        return images;
    }
}
const styles = StyleSheet.create({
   container: {
       flex:1,
       backgroundColor:'#F5FCFF',
   },
    viewStyel:{
        //确定主轴方向
        flexDirection:'row',
        //换行显示
        flexWrap:'wrap'
    },
    imageStyle:{
        width:80,
        height:80
    },
    outViewStyle:{
        backgroundColor:'red',
        justifyContent:'center',
        alignItems:'center',
        width:boxW,
        height:boxW,
        marginLeft:vMargin,
        marginTop:hMargin,
    }
});

Data.json

[
  {"icon":"danjianbao","name":"单肩包"},
  {"icon":"shuangjianbao","name":"双肩包"},
  {"icon":"qianbao","name":"钱包"},
  {"icon":"shoutibao","name":"手提包"},
  {"icon":"xiekuabao","name":"斜挎包"},
  {"icon":"liantiaobao","name":"链条包"},
]

把图片放到Xcode中的Images.xcassets

TextInput组件

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  TextInput
} from 'react-native';


export default class Test4 extends Component{
    render(){
        return(
          <View style={styles.container}>
              <TextInput style={styles.inputStyle}
                         password={true} //密码样式显示
                    clearButtonMode={'always'}//仅限iOS才有的属性
              >
                  {/*value={'我是默认文字'} 暂时有问题*/}
                  {/*multiline={true} 允许换行输入*/}
                  {/*placeholder={'我是占位文字'}*/}
              </TextInput>
          </View>
        );
    }
}
const styles = StyleSheet.create({
   container: {
       flex:1,
       backgroundColor:'#F5FCFF',
       justifyContent:'center',
       alignItems:'center'
   },
   inputStyle:{
       width:300,
       height:60,
       //边框
       borderWidth:1,
       borderColor:'#dddddd'
   }
});

登录页面小练习

新建loginView.js文件

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TextInput,
} from 'react-native';

var Dimensions = require('Dimensions');
var width = Dimensions.get('window').width;


export default class loginView extends Component {
    render() {
        return (
            <View style={styles.container}>
                {/*头像*/}
                <Image source={require('./img/oldDoctor.png')}
                       style={styles.iconStyle}
                />
                {/*账号密码*/}
                <TextInput placeholder={'请输入账号'}
                           style={styles.textInputStyle}
                />
                <TextInput placeholder={'请输入密码'}
                           style={styles.textInputStyle}
                           password={true}
                />
                {/*登录*/}
                <View style={styles.loginBtnStyle}>
                    <Text style={{color:'white'}}>登录</Text>
                </View>
                {/*设置*/}
                <View style={styles.settingStyle}>
                    <Text>无法登录</Text>
                    <Text>新用户</Text>
                </View>
                {/*三方登录方式*/}
                <View style={styles.otherLoginStyle}>
                    <Text>其他登录方式</Text>
                    <Image source={require('./img/oldDoctor.png')}
                           style={styles.otherImageStyle}
                    />
                    <Image source={require('./img/oldDoctor.png')}
                           style={styles.otherImageStyle}
                    />
                    <Image source={require('./img/oldDoctor.png')}
                           style={styles.otherImageStyle}
                    />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    iconStyle:{
        width:80,
        height:80,
        marginTop:50,
        borderRadius:40,
        borderWidth:2,
        borderColor:'orange',
        marginBottom:30,
    },
    textInputStyle:{
        backgroundColor:'white',
        width:width,
        height:40,
        marginBottom:1,
        // paddingLeft:15,
        textAlign:'center'
    },
    loginBtnStyle:{
        height:40,
        width:width*0.8,
        backgroundColor:'blue',
        marginTop:30,
        marginBottom:30,
        //    flex 布局
        justifyContent:'center',
        alignItems:'center',
        borderRadius:8
    },
    settingStyle:{
        flexDirection:'row',
        // backgroundColor:'red',
        width:width*0.8,
        justifyContent:'space-between',
    },
    otherLoginStyle:{
        flexDirection:'row',
        alignItems:'center',
        position:'absolute',
        bottom:10,
        left:20
    },
    otherImageStyle:{
        width:50,
        height:50,
        borderRadius:25,
        marginLeft:10
    }
});

//输出一个类
module.exports = loginView;

App.js文件

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  TextInput
} from 'react-native';

//引入外部的js文件
var LoginView = require('./loginView');

export default class Test4 extends Component{
    render(){
        return(
            <LoginView/>
        );
    }
}
const styles = StyleSheet.create({
   container: {
       flex:1,
       backgroundColor:'#F5FCFF',
       justifyContent:'center',
       alignItems:'center'
   },

});