如何使用React Native导航栏

问题描述

我正在尝试从navbar-native使用Navbar，但是在为我的项目导入它时遇到此错误（typeerror undefined不是对象（评估'_react.proptypes.bool'））。 这是代码：

Blazor Server-Side

这是我的package.json：

import React from "react";
import { Image,StyleSheet,View,Text } from "react-native";

import { navbar } from "navbar-native";

import colors from "../config/colors";


function ViewImageScreen(props) {
  return (
    <View style={styles.container}>
    
    <Navbar
                    title={"Navbar Native"}
                    left={{
                        icon: "ios-arrow-back",label: "Back",onPress: () => {alert('Go back!')}
                    }}
                    right={[{
                        icon: "ios-search",onPress: () => {alert('Search!')}
                    },{
                        icon: "ios-menu",onPress: () => {alert('Toggle menu!')}
                    }]}
                />

      <View style={styles.signinIcon}>
        <Text style={styles.signinText}>Se connecter</Text>
      </View>
      <View style={styles.favoris}>
        <Image style={styles.icon} source={require("../assets/logo-red.png")} />
        <Text style={styles.settingsText}>Favoris</Text>
      </View>
      <View style={styles.newsletter}>
        <Image style={styles.icon} source={require("../assets/logo-red.png")} />
        <Text style={styles.settingsText}>Newsletter</Text>
      </View>
      <View style={styles.aide}>
        <Image style={styles.icon} source={require("../assets/logo-red.png")} />
        <Text style={styles.settingsText}>Aide & Contact</Text>
      </View>
      <View style={styles.apropos}>
        <Image style={styles.icon} source={require("../assets/logo-red.png")} />
        <Text style={styles.settingsText}>A propos</Text>
      </View>
      <View style={styles.signupIcon}>
        <Text style={styles.signupText}>S'enregistrer</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  signinIcon: {
    width: "90%",height: 50,position: "absolute",top: 360,alignSelf: "center",borderColor: colors.fm_blue,borderWidth: 2,textAlign: "center",justifyContent: "center",alignItems: "center",borderRadius: 5,},signupIcon: {
    backgroundColor: colors.fm_blue,width: "90%",top: 300,container: {
    backgroundColor: colors.grey,flex: 1,signinText: {
    fontSize: 16,color: colors.fm_blue,signupText: {
    fontSize: 16,color: colors.white,settingsText: {
    fontSize: 14,margin: 50,color: colors.black,favoris: {
    backgroundColor: colors.white,width: "100%",top: 40,borderColor: colors.white,newsletter: {
    backgroundColor: colors.white,top: 100,aide: {
    backgroundColor: colors.white,top: 160,apropos: {
    backgroundColor: colors.white,top: 220,icon: {
    margin: 20,width: 20,height: 20,});

export default ViewImageScreen;

这是android模拟器上的错误的屏幕截图：

Deugger Error

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）