Làm cách nào để bạn có thể thêm chú giải công cụ nổi vào bản gốc phản ứng?

Question

Tôi đang phát triển một ứng dụng đưa người dùng qua một chuyến tham quan ngắn trước khi đến trang chính của ứng dụng (sau khi đăng ký lần đầu). Những gì tôi muốn làm là che phủ các trang ứng dụng (xem qua thanh tabbar) với các mẫu thiết kế sau đây:

Tuy nhiên Phản ứng Native Overlay có một lịch sử để lại rất nhiều lỗi trong thức của nó - cũng không có nó từng làm việc cho cá nhân tôi. Mô-đun Mẹo Công cụ Gốc Phản ứng không còn được hỗ trợ và cũng không hoạt động. Có ai từng làm điều này không? Nếu vậy, làm thế nào? Cảm ơn vì lời khuyên của bạn!

Answer 1

Có thể bạn chỉ cần tạo thành phần chú giải công cụ tùy chỉnh của mình. Dưới đây là một ví dụ rất cơ bản trong làm thế nào để làm cho nó xuất hiện trước mặt các thành phần khác sử dụng một số thủ thuật CSS và tài sản 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 *******************/ 

CẬP NHẬT: Tôi đã gỡ bỏ widget iframe Codepen vì nó có thể nhầm lẫn một số người dùng, vui lòng theo liên kết ở trên để xem ví dụ.

Answer 2

Bạn đã thử tạo tabBarComponent của riêng mình chưa? https://reactnavigation.org/docs/navigators/tab#TabNavigatorConfig

Bạn có thể sao chép xây dựng-in tabComponent và thêm các thành phần ToolTip của bạn hiển thị

Answer 3

Thay vì sử dụng đã tồn tại module NPM, những gì tôi đề nghị là để viết những thứ riêng yuor cho việc này.

Tôi nghĩ rằng Modals từ gốc tự nhiên sẽ giúp bạn đạt được điều này, bạn có thể dễ dàng đặt các Modals khác nhau.

giả sử bạn phủ một Phương thức đầu tiên ở trạng thái ban đầu có văn bản mô tả cho tính năng 'menu' và sau đó bạn có thể đặt hiển thị của nó thành sai khi người dùng nhấp vào nền và chuyển mục tiếp theo hiển thị, v.v. mục bạn muốn hiển thị, bạn có thể đặt chế độ hiển thị của chính phương thức thành sai và di chuyển với luồng ứng dụng chính.

âm thanh đó có thuyết phục không? ?