2016-09-06 12:24:06 u014360817 阅读数 1243

效果图:
这里写图片描述

组件比较简单且仅限Android使用只需要注意几个属性使用就可以了!!!

drawerWidth 导航宽度
drawerPosition 从左侧出还是从右侧出如:drawerPosition={DrawerLayoutAndroid.positions.Left}
renderNavigationView 导航视图

keyboardDismissMode enum(‘none’, “on-drag”)
指定在拖拽的过程中是否要隐藏软键盘。

  • none (默认值),拖拽不会隐藏软键盘。

  • on-drag 当拖拽开始的时候隐藏软键盘。

onDrawerClose function

每当导航视图(抽屉)被关闭之后调用此回调函数。

onDrawerOpen function

每当导航视图(抽屉)被打开之后调用此回调函数。

onDrawerSlide function

每当导航视图(抽屉)产生交互的时候调用此回调函数。

onDrawerStateChanged function

每当抽屉的状态变化时调用此回调函数。抽屉可以有3种状态:

  • idle(空闲),表示现在导航条上没有任何正在进行的交互。

  • dragging(拖拽中),表示用户正在与导航条进行交互。

  • settling(停靠中),表示用户刚刚结束与导航条的交互,导航条正在结束打开或者关闭的动画。

/**
 * Created by Administrator on 2016/9/6.
 */

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

class DrawLayoutAndroidG extends Component {
    render() {
        return (

            <DrawerLayoutAndroid
                //宽度
                drawerWidth={300}
                //从左侧出
                drawerPosition={DrawerLayoutAndroid.positions.Left}
                //侧滑View视图
                renderNavigationView={this.navigationView}
                //打开是调用
                onDrawerOpen={()=> this.onDrawerOpen()}
                //关闭时调用
                onDrawerClose={()=> this.onDrawerClose()}
            >
                <View style={{flex: 1, alignItems: 'center'}}>
                    <Text
                        style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text>
                    <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>World!</Text>
                </View>

            </DrawerLayoutAndroid>

        )
    }

    navigationView() {
        return (
            <View style={{flex: 1, backgroundColor: '#fff'}}>
                <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the Drawer!
                </Text>
            </View>
        )
    }

    onDrawerOpen() {
        alert('open')
    }
    onDrawerClose() {
        alert('close')
    }

}
module.exports = DrawLayoutAndroidG;
2016-07-15 20:04:32 jujishou521 阅读数 1782

    自己摸索中,发现好多开源组件都不全是es6写的,有些方法使用原来的语法写的(人家都写开源组件的,当然是nb的不得了,膜拜下),现在的安卓目录结构稍有不同,再说有些调用的方法不够简洁,明了。对于小学生的我,还是走了不少弯路,所以自己总结下,希望别人不要走弯路。

    下面拿一个例子,来说明下,怎么在项目中使用开源组件,(调原生安卓的控件)。

    昨天测试了下 : 

react-native-camera    (调出拍照功能)

    

react-native-image-picker    (调照片录像功能)


    其实人家的使用说明的已经够详细了,(请叫我搬运工)。我做了个使用 react-native-image-picker 的图文教程而已。下面开始:

1.自己创建个工程,react-native init  MyTestCamera  (工程名字自己定)
2.  npm install rnpm --global  (安装rnpm)

 
3.npm install react-native-image-picker@latest --save  (安装react-native-image-picker组件)

 
4.rnpm link react-native-image-picker  (关联你的安卓工程)

   
5.调拍照、获取照片都是需要权限的,那就加上权限
<!-- file: android/app/src/main/AndroidManifest.xml -->
 <!-- add following permissions -->
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
6.现在的安卓下的目录结构不是就一个Activity,具体操作如图:

 
  在MainActivity里面不用做操作,直接在MainApplication里面如图所示,加上引用的包名:
  import com.imagepicker.ImagePickerPackage// import package
new ImagePickerPackage() // Add package
7.最后一步了。修改index.android.js  我是直接修改的,你也可以在自己项目里按照自己逻辑添加
  
 
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    PixelRatio,
    TouchableOpacity,
    Image,
    Platform
} from 'react-native';
import ImagePicker from 'react-native-image-picker';
class MyTestCamera extends Component {
  state = {
    avatarSource: null,
    videoSource: null
  };
  selectPhotoTapped() {
    const options = {
      quality: 0.5,
      maxWidth: 300,
      maxHeight: 300,
      allowsEditing: false,
      storageOptions: {
        skipBackup: true
      }
    };
    ImagePicker.showImagePicker(options, (response) => {
      console.log('Response = ', response);
      if (response.didCancel) {
        console.log('User cancelled photo picker');
      }
      else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      }
      else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      }
      else {
        var source;
        // You can display the image using either:
        source = {uri: 'data:image/jpeg;base64,' + response.data, isStatic: true};
        // Or:
        // if (Platform.OS === 'android') {
        //   source = {uri: response.uri, isStatic: true};
        // } else {
        //   source = {uri: response.uri.replace('file://', ''), isStatic: true};
        // }
        this.setState({
          avatarSource: source
        });
      }
    });
  }

  selectVideoTapped() {
    const options = {
      title: 'Video Picker',
      takePhotoButtonTitle: 'Take Video...',
      mediaType: 'video',
      videoQuality: 'medium'
    };
    ImagePicker.showImagePicker(options, (response) => {
      console.log('Response = ', response);
      if (response.didCancel) {
        console.log('User cancelled video picker');
      }
      else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      }
      else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      }
      else {
        this.setState({
          videoSource: response.uri
        });
      }
    });
  }

  render() {
    return (
        <View style={styles.container}>
          <TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>
            <View style={[styles.avatar, styles.avatarContainer, {marginBottom: 20}]}>
              { this.state.avatarSource === null ? <Text>Select a Photo</Text> :
                  <Image style={styles.avatar} source={this.state.avatarSource} />
              }
            </View>
          </TouchableOpacity>
          <TouchableOpacity onPress={this.selectVideoTapped.bind(this)}>
            <View style={[styles.avatar, styles.avatarContainer]}>
              <Text>Select a Video</Text>
            </View>
          </TouchableOpacity>
          { this.state.videoSource &&
          <Text style={{margin: 8, textAlign: 'center'}}>{this.state.videoSource}</Text>
          }
        </View>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  },
  avatarContainer: {
    borderColor: '#9B9B9B',
    borderWidth: 1 / PixelRatio.get(),
    justifyContent: 'center',
    alignItems: 'center'
  },
  avatar: {
    borderRadius: 75,
    width: 150,
    height: 150
  }
});
AppRegistry.registerComponent('MyTestCamera', () => MyTestCamera);
  
ok。激动人心的时刻到了。
react-native start
react-native run-android 
大功告成!!!
=================华丽丽的分割线=================
  好多的开源组件的安装教程中介绍,需要手动修改。(也是可以的)
  手动添加
1// file: android/settings.gradle...

include ':react-native-image-picker'
project(':react-native-image-picker').projectDir = new File(settingsDir, '../node_modules/react-native-image-picker/android')
2// file: android/app/build.gradle...

dependencies {
    ...
    compile project(':react-native-image-picker')
}

// file: android/app/src/main/java/com/<...>/MainActivity.java...

import com.imagepicker.ImagePickerPackage; // import package

public class MainActivity extends ReactActivity {

   /**   * A list of packages used by the app. If the app uses additional views   * or modules besides the default ones, add more packages here.   */
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new ImagePickerPackage() // Add package
        );
    }
...
}
//老版本的还有这种
import com.remobile.camera.*;  // <--- import
public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
  ......
  private RCTCameraPackage mCameraPackage; // <--- declare package
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    mReactRootView = new ReactRootView(this);
    mCameraPackage = new RCTCameraPackage(this);// <--- alloc package

    mReactInstanceManager = ReactInstanceManager.builder()
      .setApplication(getApplication())
      .setBundleAssetName("index.android.bundle")
      .setJSMainModuleName("index.android")
      .addPackage(new MainReactPackage())
      .addPackage(mCameraPackage)              // <------ add here
      .setUseDeveloperSupport(BuildConfig.DEBUG)
      .setInitialLifecycleState(LifecycleState.RESUMED)
      .build();

    mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null);

    setContentView(mReactRootView);
  }

  .....
。。。。。。。
这个看情况而定
===============华丽丽的分割线===============
还有就是,好多开源的组件都有个Example,你可以直接在这里面 npm install 。生成model。然后就可以直接运行了。

2018-11-10 17:31:26 qq_40054213 阅读数 87

父视图属性(容器属性):

flexDirection

 flexDirection enum('row', 'column','row-reverse','column-reverse')
 flexDirection属性定义了父视图中的子元素沿横轴或侧轴方片的排列方式。

 

  • row:从左向右依次排序
  • row-reverse: 从右向左依次排列
  • column(default): 默认的排列方式,从上向下排列
  • column-reverse: 从下向上排列

justifyContent

justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')
justifyContent属性定义了浏览器如何分配顺着父容器主轴的弹性(flex)元素之间及其周围的空间,默认为flex-start。

 

  • flex-start(default) 从行首开始排列。每行第一个弹性元素与行首对齐,同时所有后续的弹性元素与前一个对齐。
  • flex-end 从行尾开始排列。每行最后一个弹性元素与行尾对齐,其他元素将与后一个对齐。
  • center 伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。
  • space-between 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐,每行最后一个元素与行尾对齐。
  • space-around 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。

alignItems

alignItems enum('flex-start', 'flex-end', 'center', 'stretch')
alignItems属性以与justify-content相同的方式在侧轴方向上将当前行上的弹性元素对齐,默认为stretch。

 

  • flex-start 元素向侧轴起点对齐。
  • flex-end 元素向侧轴终点对齐。
  • center 元素在侧轴居中。如果元素在侧轴上的高度高于其容器,那么在两个方向上溢出距离相同。
  • stretch 弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。

 

子视图属性

alignSelf

alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch')
alignSelf属性以属性定义了flex容器内被选中项目的对齐方式。注意:alignSelf 属性可重写灵活容器的 alignItems 属性。

  • auto(default) 元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
  • stretch 元素被拉伸以适应容器。
  • center 元素位于容器的中心。
  • flex-start 元素位于容器的开头。
  • flex-end 元素位于容器的结尾。


 

视图边框

  • borderBottomWidth number 底部边框宽度
  • borderLeftWidth number 左边框宽度
  • borderRightWidth number 右边框宽度
  • borderTopWidth number 顶部边框宽度
  • borderWidth number 边框宽度
  • border<Bottom|Left|Right|Top>Color 个方向边框的颜色
  • borderColor 边框颜色

 

尺寸

  • width number  宽度
  • height number  高度

 

外边距

  • margin number 外边距
  • marginBottom number 下外边距
  • marginHorizontal number 左右外边距
  • marginLeft number 左外边距
  • marginRight number 右外边距
  • marginTop number 上外边距
  • marginVertical number 上下外边距

内边距

  • padding number 内边距
  • paddingBottom number 下内边距
  • paddingHorizontal number 左右内边距
  • paddingLeft number 做内边距
  • paddingRight number 右内边距
  • paddingTop number 上内边距
  • paddingVertical number 上下内边距

边缘

  • left number 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  • right number 属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移
  • top number 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  • bottom number 属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。

定位(position)

position enum('absolute', 'relative')属性设置元素的定位方式,为将要定位的元素定义定位规则。

 

  • absolute:生成绝对定位的元素,元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
  • relative:生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

 

2018-01-04 18:17:19 hejiasu 阅读数 89

TextInput常用属性

  • value
    文本输入的默认值,赋值后UI不能修改
  • keyboardType
    键盘类型,enum(‘default’, “ascii-capable”, ‘numbers-and-punctuation’, ‘url’, ‘number-pad’, ‘phone-pad’, ‘name-phone-pad’, ‘email-address’, ‘decimal-pad’, ‘twitter’, ‘web-search’, “numeric”)
  • multiline
    如果值为真,文本输入可以输入多行。默认值为假
  • password
    如果值为真,文本输入框就成为一个密码区域。默认值为假
    注:如果设置了多行,那么这个属性不适用
  • placeholder
    在文本输入之前字符串将被呈现出来,通常被称为占位文字
  • placeholderTextColor
    占位文字的颜色
  • clearButtonMode
    清除按钮出现在文本视图右侧的时机(‘never’, ‘while-editing’, ‘unless-editing’, ‘always’)
<View style={styles.container}>

        <TextInput 
            style = {styles.inputStyle}
            value = 'UI改不来'
            keyboardType = 'number-pad'
            multiline = {true}
            password = {true}
            placeholder = '占位文字'
            clearButtonMode = 'always'
            >
        </TextInput>

      </View>
2019-01-25 15:18:50 wangshuhua81 阅读数 71

大家好,我是贰妹子,希望我的博客可以帮到你。

  • View组件中常见的属性

       React Native组件View,其作用等同于iOS中的UIView, Android中的android.view,或是网页中的<div>标签,它是所有组件的父组件。

  1. Flexbox——弹性布局
  2. Transforms  动画属性
  3. backfaceVisibility enum('visible', 'hidden')    定义界面翻转的时候是否可见
  4. opacity number 设置透明度,取值从0-1;
  5. overflow enum('visible', 'hidden')  设置内容超出容器部分是显示还是隐藏;
  6. elevation number 高度   设置Z轴,可产生立体效果。
  • 一个简单的入门小例子
import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    View,        //所以的布局要被View包裹
    Text,        //文本
    Image,        //图片
    FlatList,    //列表
    TextInput,   //输入框
    Button,      //按钮
} from 'react-native';
class ViewData extends Component{
render(){
    return(
    <View style={styles.ViewStyle}>
        <Text> 大家好,我是贰小妹儿 </Text>
</View>
)
}
}
const styles = StyleSheet.create({
   ViewStyle: {
        flexDirection: 'row', //主轴的方向
        justifyContent: 'center' //主轴的对齐方式
    },
)}

    在React Native开发中,更加推荐我们采用StyleSheet来进行组件的布局,这样的话,代码在结构上会更加的清晰、也有利于后期维护。

    当然,在开发中会根据具体情况来灵活运用。

没有更多推荐了,返回首页