반응 네이티브에서 부동 툴팁을 어떻게 추가 할 수 있습니까?

Question

처음 신청 후 메인 페이지로 이동하기 전에 간단한 둘러보기를 통해 사용자를 안내하는 응용 프로그램을 개발 중입니다. 내가 뭘하고 싶은 다음과 같은 디자인으로합니다 (TabBar의를 통해 본) 응용 프로그램 페이지 오버레이입니다 :

을하지만 기본 오버레이의 여파로 많은 오류를 떠나 역사를 가지고 반작용 -도있다 개인적으로 저를 위해 일해 왔습니다. React Native ToolTip 모듈은 더 이상 지원되지 않으며 작동하지 않습니다. 아무도 이것을 성취하지 못했습니까? 그렇다면 어떻게? 귀하의 조언에 감사드립니다!

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 *******************/ 

UPDATE : 여기가 일부 CSS의 트릭과 Z- 색인 속성을 사용하여 다른 구성 요소의 전면에 표시되도록하는 방법에 매우 기본적인 예입니다 그것은 일부 사용자를 혼란스럽게 할 수 있기 때문에 나는 Codepen은 iframe 위젯을 제거, 위의 링크를 따라 예제를 확인하십시오.

Answer 2

직접 만들려고 했습니까 tabBarComponent? https://reactnavigation.org/docs/navigators/tab#TabNavigatorConfig

당신은 tabComponent에-구축하고 난 이것에 대한 yuor 자신의 물건을 작성하는 것입니다 제안 무엇 NPM 모듈을 이미 사용하여 기존

Answer 3

보다는 렌더링하기 위해 도구 설명 구성 요소를 추가 복사 할 수 있습니다.

반응 네이티브의 모달이이를 달성하는 데 도움이된다고 생각하면 기능 소개 텍스트/이미지가있는 다른 모달을 쉽게 배치 할 수 있으며 이러한 텍스트/이미지의 가시성을 쉽게 전환 할 수 있습니다.

처음 상태에서 'menu'기능에 대한 설명자 텍스트가있는 모달 오버레이라고 말한 다음 사용자가 배경을 클릭하고 다음 항목을 볼 수있게 할 때 등의 표시를 false로 설정할 수 있습니다. 항목을 표시하려면 모달 자체 가시성을 false로 설정하고 기본 앱 흐름으로 이동하십시오.

설득력이 있습니까? ?