如何在反應本機中添加浮動工具提示？

我正在開發一個應用程序，在進入應用程序的主頁之前（初始註冊後），通過簡短的導覽訪問用戶。我想這樣做是具有以下設計覆蓋的應用頁面（通過使用TabBar可見）：如何在反應本機中添加浮動工具提示？

然而陣營本地覆蓋有留下不少在其身後的錯誤的歷史 - 也沒有它曾經爲我個人工作。 React Native ToolTip模塊不再受支持，也不起作用。有沒有人完成過這個任務？如果是這樣，怎麼樣？感謝您的建議！

2017-01-19 Robert Tomas G IV

請給出推理的投票，以便我可以編輯我的問題 –

我使用https://github.com/Jpoliachik/react-native-triangle進行繪製Tringle和我手動完成的泡泡。另外'react-native-animatable'給動畫 – jose920405

-3

也許你可以創建自定義的工具提示組件。這裏是如何使它使用一些CSS技巧和zIndex屬性出現在其他組件的前面一個很簡單的例子：https://codepen.io/vtisnado/pen/WEoGey

class SampleApp extends React.Component { 
    render() { 
    return (
     /******************* RENDER VISUAL COMPONENTS *******************/ 
     <View style={styles.container}> 
     <View style={styles.mainView}> 
      {/* Start: Tooltip */} 
      <View style={styles.talkBubble}> 
      <View style={styles.talkBubbleSquare}> 
       <Text style={styles.talkBubbleMessage}>Put whatever you want here. This is just a test message :)</Text> 
      </View> 
      <View style={styles.talkBubbleTriangle} /> 
      </View> 
      {/* End: Tooltip */} 
      <View style={styles.anotherView} /> {/* The view with app content behind the tooltip */} 
     </View> 
     </View> 
     /******************* /RENDER VISUAL COMPONENTS *******************/ 
    ); 
    } 
} 

/******************* CSS STYLES *******************/ 
const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF' 
    }, 
    mainView: { 
    flex: 1, 
    flexDirection: 'row', 
    }, 
    talkBubble: { 
    backgroundColor: 'transparent', 
    position: 'absolute', 
    zIndex: 2, // <- zIndex here 
    flex: 1, 
    left: 20, 
    //left: (Dimensions.get('window').width/2) - 300, // Uncomment this line when test in device. 
    bottom: 60, 
    }, 
    talkBubbleSquare: { 
    width: 300, 
    height: 120, 
    backgroundColor: '#2C325D', 
    borderRadius: 10 
    }, 
    talkBubbleTriangle: { 
    position: 'absolute', 
    bottom: -20, 
    left: 130, 
    width: 0, 
    height: 0, 
    borderLeftWidth: 20, 
    borderRightWidth: 20, 
    borderTopWidth: 20, 
    borderLeftColor: 'transparent', 
    borderRightColor: 'transparent', 
    borderTopColor: '#2C325D', 
    }, 
    talkBubbleMessage: { 
    color: '#FFFFFF', 
    marginTop: 40, 
    marginLeft: 20, 
    marginRight: 20, 
    }, 
    anotherView: { 
    backgroundColor: '#CCCCCC', 
    width: 340, 
    height: 300, 
    position: 'absolute', 
    zIndex: 1, // <- zIndex here 
    }, 
}); 
/******************* /CSS STYLES *******************/

更新：我刪除了Codepen iframe的小部件，因爲它可能會迷惑一些用戶，請按照上述鏈接查看示例。

來源

2017-08-04 05:22:13 vtisnado

我認爲這個答案是針對網絡中的React，而不是React Native on Mobile。 – AdamG

您是否檢查CodePen中的示例？我假設沒有，因爲除了'const rootTag = document.getElementById（'react-root'）;'之外的所有代碼都是在React-Native中製作的，並且該行僅用於web上的演示。也許你應該在downvote答案之前仔細閱讀。 – vtisnado

你的回答雖然提供了一個很好的工具提示視覺表示，但是很難理解。你有一個顯示iFrame的代碼，一些按鈕可以將你帶到一個404頁面，最後如果你深入到iFrame的中間，你可以找到一個有一些有用代碼的網址。如果你能以更好的方式重新呈現它，我會很樂意刪除downvote。 – AdamG

您是否嘗試過創建屬於自己的tabBarComponent？ https://reactnavigation.org/docs/navigators/tab#TabNavigatorConfig

您可以複製內建tabComponent並添加工具提示組件來呈現

來源

2018-01-23 15:43:57

而不是使用現有的NPM模塊，我的建議是寫上你的自己的東西這一點。

我認爲反應原生的Modals可以幫助你實現這一點，你可以很容易地放置不同的Mod，這些Modals可以讓你的功能介紹文本/圖像，並且你可以很容易地繼續切換這些文本/圖像的可見性。

說你首先覆蓋一個Modal，它在初始狀態下有'菜單'功能的描述符文本，然後當用戶在後臺點擊並將下一個項目變爲可見等等時，可以將其可見性設置爲false。要顯示的項目，您可以將Modal本身的可見性設置爲false，然後繼續使用主應用程序流程。

這聽起來有說服力嗎？？

來源

2018-02-14 06:43:59

如何在反應本機中添加浮動工具提示？

回答

相關問題