神刀安全网

[译]React Native开源仿照Android平台的Toast组件

尊重版权,转载请注明出处

本文来自:江清清的技术专栏-翻译组(http://www.lcode.org)

翻译计划项目: https://github.com/jiangqqlmj/js-coach-cn

开源项目地址: https://github.com/shigebeyond/react-native-sk-toast

项目介绍

该Sk-Toast组件仅仅视频iOS平台,该是仿照Android平台Toast组件效果

刚创建的React Native技术交流2群( 496601483 )欢迎各位大牛,React Native技术爱好者加入交流!

配置安装

1.命令行运行npm install react-native-sk-toast@latest –save

2.在XCode中,选择导航项目右击点击Libraries ➜ Add Files to [当前项目]

3.切换到node_modules目录 ➜ 选择react-native-sk-toast ➜ ios and add ReactNativeToast.xcodeproj

[译]React Native开源仿照Android平台的Toast组件

4.添加 libReactNativeToast.a (from ‘Products’ under ReactNativeToast.xcodeproj)到项目Build Phases ➜ Link Binary With Libraries phase

[译]React Native开源仿照Android平台的Toast组件

[译]React Native开源仿照Android平台的Toast组件

5.下面进行写代码

'use strict';  var React = require('react-native'); var {   AppRegistry,   View,   Text,   TouchableOpacity,   StyleSheet } = React; var Toast = require('react-native-sk-toast'); var Screen = require('Dimensions').get('window');  var nostalgia = React.createClass({   topToast: function(){     Toast.top('top toast');   },   centerToast: function(){     Toast.center('center toast');   },   bottomToast: function(){     Toast.bottom('bottom toast');   },   render: function(){     return (       <View style={styles.container}>         <TouchableOpacity style={styles.button} activeOpacity={1} onPress={this.topToast}>             <Text style={styles.txt}>top</Text>         </TouchableOpacity>         <TouchableOpacity style={styles.button} activeOpacity={1} onPress={this.centerToast}>             <Text style={styles.txt}>center</Text>         </TouchableOpacity>         <TouchableOpacity style={styles.button} activeOpacity={1} onPress={this.bottomToast}>             <Text style={styles.txt}>bottom</Text>         </TouchableOpacity>       </View>     )   } });  var styles = StyleSheet.create({   container:{     flex:1,     alignItems: 'center',     justifyContent: 'space-around'   },   button: {     width: 70,     height: 30,     justifyContent: 'center',     backgroundColor: 'yellow',     borderColor: 'blue',     borderWidth: 3,     borderRadius: 5,   },   txt: {     textAlign: 'center'   } });
运行截图

[译]React Native开源仿照Android平台的Toast组件

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » [译]React Native开源仿照Android平台的Toast组件

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮