React Native API之 ActionSheetIOS

ok!先来演示是下效果:

官网教程:http://reactnative.cn/docs/0.31/actionsheetios.html#content

上代码:引入API组件:

复制代码
import React,{Component} from 'react';
import {
  StyleSheet,
  View,
  Image,
  Text,
  TouchableOpacity,
  ScrollView,
  Navigator,
  ActionSheetIOS,
  TouchableHighlight,
} from 'react-native';
复制代码

定义json数组:---用来显示弹出层的item内容

复制代码
var BUTTONS = [
  '拍照',
  '从相册选择',
  '取消',
  '删除',
  '删a',
  '删',
  '除',
];

var DESTRUCTIVE_INDEX = 1;  顺序索引
var CANCEL_INDEX = 2;
复制代码

ok~自定义一个组件

复制代码
{/*显示组件*/}
class CustomButton extends Component {
  render() {
    return (
      <TouchableHighlight
        style={styles.button}
        underlayColor="red"
        onPress={this.props.onPress}>
        <Text style={styles.buttonText}>{this.props.text}</Text>
      </TouchableHighlight>
    );
  }
}
复制代码

自定义一个需要显示的组件(这个组件是包含这个API的具体实现)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
class ActionSheetDemo extends Component {
  constructor(props){
    super(props);
    this.state={
      clicked: 'none',
    };
    this._showActionSheet = this.showActionSheet.bind(this);
}
  //显示弹出的东东
  showActionSheet() {
    ActionSheetIOS.showActionSheetWithOptions({
      options: BUTTONS,
      cancelButtonIndex: CANCEL_INDEX,
      destructiveButtonIndex: DESTRUCTIVE_INDEX,
      tintColor: 'blue',
      title:'发布工位',
     
    },
    (buttonIndex) => {
      this.setState({ clicked: BUTTONS[buttonIndex] });
    });
  }    //回调函数
 
  render() {
    return (
      <View>
 
        <CustomButton text="弹出基本Action"
            onPress={this._showActionSheet}
        />
        <Text style={{margin:10}}>
           基本Action点击选择的项目为: {this.state.clicked}
        </Text>
</View>
    );
  }
}

  好了 !这样的话我们就可以使用啦 

1
<ActionSheetDemo/>

  

posted @   谢玉胜  阅读(1128)  评论(0编辑  收藏  举报
努力加载评论中...
@allenXieyusheng
点击右上角即可分享
微信分享提示