आप प्रतिक्रिया मूल में फ्लोटिंग टूलटिप्स कैसे जोड़ सकते हैं?

Question

मैं एक ऐसा एप्लिकेशन विकसित कर रहा हूं जो एप्लिकेशन के मुख्य पृष्ठ (आरंभिक साइन अप के बाद) जाने से पहले उपयोगकर्ता को एक छोटे से दौरे के माध्यम से ले जाता है। मुझे क्या करना चाहते हैं निम्नलिखित डिजाइन के साथ ऐप्लिकेशन पृष्ठों (tabbar के माध्यम से देखा जाता है) उपरिशायी है:

हालांकि प्रतिक्रिया मूल निवासी ओवरले अपने जाग में त्रुटियों की एक बहुत कुछ छोड़ने का इतिहास रहा है - और न ही है यह कभी मेरे लिए व्यक्तिगत रूप से काम किया। प्रतिक्रिया मूल टूलटिप मॉड्यूल अब समर्थित नहीं है और यह भी काम नहीं करता है। क्या किसी ने कभी इसे पूरा किया है? यदि हां, तो कैसे? आपकी सलाह के लिए धन्यवाद!

Answer 1

शायद आप अपना कस्टम टूलटिप घटक बना सकते हैं। 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 *******************/ 

अद्यतन: यहाँ कैसे यह कुछ सीएसएस चाल और zindex संपत्ति का उपयोग कर अन्य घटकों के सामने प्रदर्शित करने के लिए में एक बहुत ही बुनियादी उदाहरण है मैं Codepen आइफ्रेम विजेट हटा दिया है, क्योंकि यह कुछ उपयोगकर्ताओं को भ्रमित कर सकता है, उदाहरण देखने के लिए उपर्युक्त लिंक का पालन करें।

Answer 2

क्या आपने अपना खुद का tabBarComponent बनाने का प्रयास किया है? https://reactnavigation.org/docs/navigators/tab#TabNavigatorConfig

आप निर्माण में tabComponent और पहले से ही प्रयोग NPM मॉड्यूल, मैं क्या सुझाव है कि इस बात के लिए yuor खुद सामान लिखना है मौजूदा

Answer 3

बजाय रेंडर करने के लिए अपने ToolTip घटक जोड़ने कॉपी कर सकते हैं।

मुझे लगता है कि प्रतिक्रिया-मूल से मॉडल आपको यह प्राप्त करने में मदद करेंगे, आप आसानी से विभिन्न मॉडलों को रख सकते हैं जिनमें आपकी सुविधा-प्रारंभिक पाठ/छवि होगी और आप आसानी से इन ग्रंथों/छवियों की दृश्यता को टॉगल कर सकते हैं।

कहता है कि आप पहले मॉडेल को ओवरले करते हैं, जिसमें प्रारंभिक स्थिति में 'मेनू' सुविधा के लिए वर्णक पाठ होता है और फिर जब आप पृष्ठभूमि में क्लिक करते हैं और अगले आइटम को अंतिम बार चालू करते हैं तो आप इसकी दृश्यता को झूठी पर सेट कर सकते हैं। जिस आइटम को आप प्रदर्शित करना चाहते हैं, आप मॉडल की दृश्यता को झूठी पर सेट कर सकते हैं और मुख्य ऐप प्रवाह के साथ आगे बढ़ सकते हैं।

क्या यह ध्वनि विश्वसनीय है? ?