React-Native 之基础控件使用 （六）

引入控件需要这样设置，在你的 React-Native js中；

引入系统控件

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  TextInput,
  TabBarIOS,
  Dimensions,
  ScrollView,
  Image,
  ListView,
  NavigatorIOS,
} from 'react-native';

获取屏幕宽、高、比例

需要引入系统 Dimensions；

const ScreenWidth = Dimensions.get('window').width; //屏幕宽
const ScreenHeight = Dimensions.get('window').height; //高
const ScreenScale = Dimensions.get('window').scale;//比例

自定义控件

创建 一个 TopView.js 的文件 （文件名首字母要大写);

/* 模版案例 */
    
import React ,{Component} from 'React';
import  {
  AppRegistry ,
  View,
  Text,
  Dimensions,
  StyleSheet,
 }from 'react-native';
    
const ScreenWidth = Dimensions.get('window').width; //屏幕宽
const ScreenHeight = Dimensions.get('window').height; //高
const ScreenScale = Dimensions.get('window').scale;//比例
    
    
export default class TopView extends Component {
  render() {
    return (
      
          测试一下自己封装的-控件
      
    );
  }
}
    
const styles = StyleSheet.create({
  showTop:{
    flex:1,
    width:ScreenWidth,
    height:50,
    marginTop:20,
    backgroundColor:'#F5FCF0',
  },
});
module.exports = TopView;  

在别的js 内引入这个js 模块
./ 表示在当前目录下
../ 表示在上层目录下

import TopView from './TopView.js';

Image 控件

 
 
 
 注意：Image 控件需要第一次需要设置一个宽高 ，否则无法显示出来

Text 控件

 {这里放显示的文字内容}  

View 控件

TextInput 控件

 console.log('onFocus')}    //对焦触发的事件
        onBlur={() => console.log('onBlur')}      //onBlur触发的事件  
        onChange= {() => console.log('onChange')}
        onChangeText={(text) => {
                   
          console.log('text:'+ text);
   
        }}                                            //input输入框值改变触发的事件
        onEndEditing ={()=> console.log('onEndEditing')}  //停止编辑触发的事件
        onSubmitEditing ={()=> {
        
          this.FetchSearchData();
          
        }} //点击提交按钮触发的事件 ,FetchSearchData 是一个自定义事件

      />    
      

TabBarIOS 控件

TabBarIOS.Item 子控件-系统

    
             {this.setState({selectedTabItem:0})}}
              selected={this.state.selectedTabItem == 0}
            >
            
            
            
            
            
            
            
            
            
            
            
             

TabBarIOS.Item 自定义icon 图标和文字

 {this.setState({selectedTabItem:0})}}
              selected={this.state.selectedTabItem == 0}
              >

注意：
这里的 uri:Icons.home是自己创建了一个Icons 的js 文件，export 图片的base64 编码；
scale:4.6 设置图标的显示比例；

ListView 控件