Реагируйте на собственный стиль Stylesheet.absoluteFillObject, не закрывая панель вкладок, чтобы создать сообщение в приложении

Question

Я получил приложение react-native и хотел бы реализовать какую-либо функцию обмена сообщениями в приложении.

Сообщение в приложении должно появляться во всем приложении, его можно щелкнуть или закрыть.

Я создаю компонент с рендерингом, подобным этому:

// InAppMessage.jsx

render() {
    if (this.state.open) { // if the in-app message needs to be seen
      return (
          <View style={{ zIndex: 1000, ...StyleSheet.absoluteFillObject, borderColor: 'yellow', borderWidth: 2 }}>
            <View style={{ flex: 1, width: '100%', backgroundColor: Colors.semiTransparent, justifyContent: 'center', alignItems: 'center' }}>
              <TouchableHighlight onPress={() => this.navigate('ProfileScreen')}> // just a fixed example
                <View style={{ width: 150, height: 150, backgroundColor: 'red' }}></View>
              </TouchableHighlight>
            </View>
          </View>
      );
    } else return null
  }

Затем я добавляю компонент в приложении на любом экране следующим образом:

// RandomAppScreen.jsx

import InAppMessage from './InAppMessage.jsx'

[...]

render (
    <View>
        <InAppMessage />
        [other specific screen stuff]
    </View>
)

You можете увидеть результат здесь:

Я использую react-navigation v3 с 20+ экранами в стеках, вкладках и переключателях навигаторов.

Компонент InAppMessage не перемещается по нижней вкладке, как хотелось бы, почему?

Как мне этого добиться?

Answer 1

Хорошо, я сделал это!

К счастью, у меня было состояние навигации в магазине редукторов. Боже, храни избыточный.

Итак, иерархия была следующей:

App  
--> Redux  
    --> ReactNavigation

Сейчас есть

App  
--> Redux  
    --> ReactNavigation
    --> InAppMessage

Я могу подключить новый InAppMessage к хранилищу и отправлять такие действия, как this:

import React from 'react'
import { View, TouchableHighlight, StyleSheet } from 'react-native'
import { Colors } from '../../Themes';
import { connect } from 'react-redux';
import { NavigationActions } from 'react-navigation'

class InAppMessageOverlay extends React.Component {
  constructor(props) {
    super(props);

    this.navigate.bind(this);
    this.state = { open: true };
  }

  navigate(screen) {
    this.setState({ open: false });
    this.props.dispatch(NavigationActions.navigate({ routeName: screen }))
  }

  render() {
    if (this.state.open) {
      console.log(this.props);
      return (
          <View style={{ zIndex: 1000, ...StyleSheet.absoluteFillObject, borderColor: 'yellow', borderWidth: 2 }}>
            <View style={{ flex: 1, width: '100%', backgroundColor: Colors.semiTransparent, justifyContent: 'center', alignItems: 'center' }}>
              <TouchableHighlight onPress={() => this.navigate('ProfileScreen')}>
                <View style={{ width: 150, height: 150, backgroundColor: 'red' }}></View>
              </TouchableHighlight>
            </View>
          </View>
      );
    } else return null
  }
}

const mapStateToProps = (state) => ({
  state,
})

export default connect(mapStateToProps)(InAppMessageOverlay)

Я буду использовать состояние приращения, а не состояние компонента, но я был слишком взволнован, чтобы поделиться этим

Изображение, связанное