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/> |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步