react-native-tooltip, 用于显示工具提示的响应本机包装

分享于 

4分钟阅读

GitHub

  繁體
A react-native wrapper for showing tooltips
  • 源代码名称:react-native-tooltip
  • 源代码网址:http://www.github.com/chirag04/react-native-tooltip
  • react-native-tooltip源代码文档
  • react-native-tooltip源代码下载
  • Git URL:
    git://www.github.com/chirag04/react-native-tooltip.git
    Git Clone代码到本地:
    git clone http://www.github.com/chirag04/react-native-tooltip
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/chirag04/react-native-tooltip
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    react-native-tooltip

    显示工具提示的响应本机组件。 使用 UIMenuController。

    将它添加到你的项目中

    • 运行 npm install react-native-tooltip --save
    • 在XCode中打开项目,右键单击 Libraries 并单击 Add Files to"Your Project Name"( 屏幕截图) 然后是 ( 屏幕截图)。
    • libRNToolTipMenu.a 添加到 Build Phases -> Link Binary With Libraries( 屏幕截图)
    • 每当你想在React代码中使用它时: var ToolTip = require('react-native-tooltip');

    用法

    道具

    • actions: 操作的array [{text: 'Copy', onPress: () => Clipboard.set(this.someValue) }]
    • longPress: 布尔值指示工具提示是否应该以长长度显示,默认情况下为 false。
    • arrowDirection: 指示工具提示箭头方向的字符串。 可能的值包括:updownleftright。 默认值为 down
    来自 TouchableHighlight.propTypes的道具
    • activeOpacity
    • onHideUnderlay
    • onShowUnderlay
    • style
    • underlayColor

    你可以在react本地网站上看到该列表。

    示例

    importReactfrom'react';import {
     AppRegistry,
     StyleSheet,
     PixelRatio,
     View,
     Text,
    } from'react-native';importToolTipfrom'react-native-tooltip';exportdefaultclassMyToolTipextendsReact.Component {
     state = {
     input:'chirag' };
     handleCopyPress= () => {
     AlertIOS.alert(`Copy has been pressed!`);
     };
     handleOtherPress= () => {
     AlertIOS.alert(`Other has been pressed!`);
     };
     handleHide= () => {
     console.log('Tooltip did hide');
     };
     handleShow= () => {
     console.log('tooltip did show');
     };
     render() {
     return (
     <View style={{flex:1, justifyContent:'center'}}><ToolTip
     ref='tooltip' actions={[
     {text:'Copy', onPress:this.handleCopyPress },
     {text:'Other', onPress:this.handleOtherPress }
     ]}
     onHide={this.handleHide}
     onShow={this.handleShow}
     underlayColor={'blue'}
     style={styles.selectedName}
     ><Text style={styles.welcome}> Press Here.
     </Text></ToolTip></View> );
     }
    }conststyles=StyleSheet.create({
     container: {
     flex:1,
     justifyContent:'center',
     alignItems:'center',
     backgroundColor:'#F5FCFF',
     },
     textinputContainer: {
     marginTop:20,
     justifyContent:'center',
     alignItems:'center',
     },
     textinput: {
     width:60,
     marginVertical:2,
     marginHorizontal:2,
     borderWidth:1/PixelRatio.get(),
     borderRadius:5,
     borderColor:'#c7c7cc',
     padding:2,
     fontSize:14,
     backgroundColor:'white',
     },
    });AppRegistry.registerComponent('tooltip', () => tooltip);

    注释

    还可以通过调用 this.refs.theToolTip.showMenu(); ( theToolTip 是组件的引用) 以编程方式打开菜单。 隐藏菜单 this.refs.theToolTip.hideMenu(); ( 尽管工具提示自身隐藏,但在特定手势工具提示上使用抽屉不隐藏)。

    它的外观如下:

    Demo gif

    特别感谢

    特别感谢 jrichardlai 重构api并让它变得出色。


    tool  WRAP  换行  react  NAT  显示  
    相关文章