Обнаружение активного экрана в React Native

Question

Извините за мой плохой английский.Я построил панель навигации без использования Tab Navigation из React Navigation, все работает нормально, кроме случаев, когда я пытаюсь установить значок «активный», я обрабатывал его состояниями, но состояние перезапускается, когда я перехожу в другое окно и снова визуализирую панельнавигация.

Я думаю, что немного усложнил, но мне нужно сделать снимок активного экрана, чтобы передать его как статус, и изменить цвет значка на «активный», а остальные отключить.Я пытался определить активный экран и onDidFocus, но я получил только информацию о переходе, мне требуется имя или идентификатор экрана.

Я оставляю свой код (этот компонент экспортируется на каждую страницу, где я хочуесть панель навигации).Пожалуйста, идея состоит в том, чтобы не использовать Tab Navigation из React Native Navigation.

export default class Navbar extends Component {

/** Navigation functions by clicking on the icon (image) */
_onPressHome() {
    this.props.navigation.navigate('Main');
}

_onPressSearch() {

    this.props.navigation.navigate('Main');
}

render() {
    const { height, width } = Dimensions.get('window');
    return (
        <View style={{ flexDirection: 'row', height: height * .1, justifyContent: 'space-between', padding: height * .02 }}>
            /** Icon section go Home screen */
            <View style={{ height: height * .06, alignItems: 'center' }}>
                <TouchableOpacity
                    onPress={() => this._onPressHome()}
                    style={styles.iconStyle}>
                    <Image
                        source={HOME_ICON}
                        style={{ width: height * .04, height: height * .04, }} />
                    <Text style={[styles.footerText, { color: this.state.colorA }]}>Inicio</Text>
                </TouchableOpacity>
            </View>
            /** Icon section go Search screen */
            <View style={{ height: height * .06, alignItems: 'center' }} >
                <TouchableOpacity
                    onPress={() => this._onPressSearch()}
                    style={styles.iconStyle}>
                    <Image
                        source={SEARCH_ICON}
                        style={{ width: height * .04, height: height * .04, opacity: .6 }} />
                    <Text style={[styles.footerText, { color: this.state.colorB }]}>Inicio</Text>
                </TouchableOpacity>
            </View>
        </View>
    )
}
}

Для навигации я использовал createStackNavigator, а также

const drawerNavigatorConfig = {
contentComponent: props => <CustomDrawerContentComponent {...props} 
/>,
};

const AppDrawer = createDrawerNavigator(drawerRouteConfig, 
drawerNavigatorConfig);

Я не знаю, мешает ли createDrawerNavigator создаватьчто-то я прочитал, что генерирует дополнительные ключи.Пожалуйста, помогите мне с этим.

Answer 1

Вы можете использовать эту библиотеку inViewPort для проверки порта просмотра пользователя.Вот как вы можете использовать библиотеку

render(){
    <InViewPort onChange={(isVisible) => this.checkVisible(isVisible)}>
      <View style={{flex: 1, height: 200, backgroundColor: 'blue'}}>
        <Text style={{color: 'white'}}>View is visible? {this.state.visible </Text>
      </View>
    </InViewPort>
}