Jak dodać pływające podpowiedzi do reagowania natywnego?

Question

Pracuję nad aplikacją, która zabiera użytkownika przez krótką wycieczkę przed przejściem do głównej strony aplikacji (po wstępnej rejestracji). Co chciałbym zrobić, to nakładanie stron aplikacji (obserwowane przez im zakładkami) z następujących wzorów:

Jednak React Native Nakładka ma historię pozostawiając dużo błędów w jego wyniku - nie ma to zawsze pracowało dla mnie osobiście. Moduł React Native ToolTip nie jest już wspierany i nie działa. Czy ktoś kiedykolwiek to osiągnął? Jeśli tak to jak? Dziękuję za radę!

Answer 1

Może po prostu utworzysz niestandardowy komponent podpowiedzi. Oto bardzo prosty przykład, w jaki sposób, aby pojawić się przed innymi elementami za pomocą kilku sztuczek CSS i mienia 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 *******************/ 

UPDATE: usunąłem iframe widget Codepen ponieważ może to zmylić niektórych użytkowników proszę kliknąć powyższy link, aby zobaczyć przykład.

Answer 2

Czy próbowałeś już stworzyć własny tabBarComponent? https://reactnavigation.org/docs/navigators/tab#TabNavigatorConfig

może kopiować wbudowany tabComponent i dodać elementy etykietka do renderowania

Answer 3

zamiast używać już istniejących modułów NPM, co proponuję jest napisać yuor własne rzeczy do tego.

Myślę, że moduły z native-native-residualu pomogłyby w osiągnięciu tego celu, można byłoby łatwo umieścić różne moduły, które zawierałyby tekst/obraz wprowadzający do funkcji i moglibyście łatwo kontrolować widoczność tych tekstów/obrazów.

Załóżmy, że nakładasz najpierw Modal, który w stanie początkowym ma tekst deskryptora dla funkcji "menu", a następnie możesz ustawić jego widoczność na false, gdy użytkownik kliknie w tle i obróci następny element widoczny i tak dalej, na ostatnim element, który chcesz wyświetlić, możesz ustawić widoczność samego modalnego na false i przejść do głównego przepływu aplikacji.

Czy to brzmi przekonująco? ?