Блог

Главная - Вопросы по программированию - Проблема с подсказкой React-Native

Проблема с подсказкой React-Native

#react-native #tooltip #react-native-elements

Вопрос:

Я пытаюсь найти простую рабочую подсказку для react-native, но не могу ее найти. Во всех них много-много ошибок. Я хотел бы описать проблему в «react-native-элементы/Всплывающая подсказка» (версия 3.4.2), а также запросить рабочий компонент всплывающей подсказки.

 ...
    render() {
        return (
            <View>
                <Text style={styles.pageTitle}>{this.props.messages.account}</Text>
                <View style={styles.horizontalFlex}>
                    <Text
                        style={styles.userInfo}>{this.props.messages.subscriptionModel}: {this.props.route.params.userProfile}
                    </Text>
                    <Tooltip popover={<Text>Info here</Text>}>
                        <EntypoIcon style={styles.infoIcon} name="info-with-circle" size={20} color={Colors.DARK_BLUE}/>
                    </Tooltip>
                </View>
            </View>
        );
    }
...

let styles = EStyleSheet.create({
    container: {
        flex: 1,
        flexDirection: "column",
    },
    pageTitle: {
        ...
    },
    userInfo: {
        textAlign: "left",
        justifyContent: "center",
        marginLeft: "20rem",
        color: Colors.DARK_BLUE,
        fontSize: "15rem",
        marginBottom: "10rem"
    },
    infoIcon: {
        paddingLeft: "20rem",
    },
    horizontalFlex: {
        flexDirection: "row"
    }
});
...

Вывод для приведенного выше кода выглядит следующим образом:

введите описание изображения здесь

Каким-то образом значок, к которому я прикладываю подсказку, скользит выше. Неважно, значок это или текст, возникает та же проблема. Как мне это исправить? Знаете ли вы какую-либо другую рабочую подсказку в react-native, которую вы пробовали и увидели, что она работает недавно?

Комментарии:

1. Я использую его с той же версией , никогда не сталкивался с этой проблемой . может быть, на вашем макете или других видах ?

2. @heathkev Это все, что у меня есть выше, никакого другого макета или представления в этом компоненте. Не могли бы вы попробовать код выше?

Ответ №1:

Мне пришлось установить withOverlay в false, а skipAndroidStatusBar в true. Это было не то, что мне нужно, но все равно это приемлемо. Вот код:

 <Tooltip 
    popover={<Text style={...text style here...}>Change here</Text>}
    withOverlay={false}
    skipAndroidStatusBar={true}
    containerStyle={...container style here...}
    backgroundColor={...color...}>
Метки: