如何使用react原生导航栏

Question

我正试图从Navbar原生版本使用Navbar，但在为我的项目导入它时遇到了这个错误(typeerror undefined不是对象(正在评估'_react.protypes.bool'((。这是代码：

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%",
height: 50,
position: "absolute",
top: 300,
alignSelf: "center",
textAlign: "center",
justifyContent: "center",
alignItems: "center",
borderRadius: 5,
},
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%",
height: 50,
position: "absolute",
top: 40,
alignSelf: "center",
borderColor: colors.white,
textAlign: "center",
justifyContent: "center",
},
newsletter: {
backgroundColor: colors.white,
width: "100%",
height: 50,
position: "absolute",
top: 100,
alignSelf: "center",
borderColor: colors.white,
textAlign: "center",
justifyContent: "center",
},
aide: {
backgroundColor: colors.white,
width: "100%",
height: 50,
position: "absolute",
top: 160,
alignSelf: "center",
borderColor: colors.white,
textAlign: "center",
justifyContent: "center",
},
apropos: {
backgroundColor: colors.white,
width: "100%",
height: 50,
position: "absolute",
top: 220,
alignSelf: "center",
borderColor: colors.white,
textAlign: "center",
justifyContent: "center",
},
icon: {
margin: 20,
width: 20,
height: 20,
position: "absolute",
justifyContent: "center",
},
});
export default ViewImageScreen;

这是我的包.json:

{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"expo": "~38.0.8",
"expo-status-bar": "^1.0.2",
"navbar-native": "^1.6.1",
"prop-types": "^15.7.2",
"react": "~16.11.0",
"react-dom": "~16.11.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
"react-native-navbar": "^2.1.0",
"react-native-vector-icons": "^7.0.0",
"react-native-web": "~0.11.7"
},
"devDependencies": {
"@babel/core": "^7.8.6",
"@types/react-native-vector-icons": "^6.4.5",
"babel-preset-expo": "~8.1.0"
},
"private": true
}

这是安卓模拟器上的错误截图：

除雾器错误

Answer 1

首先需要导入带有大写的Navbar

import { Navbar } from "navbar-native";

如果没有，请参考这些

https://github.com/redbaron76/navbar-native/issues/12

https://github.com/redbaron76/navbar-native/issues/18

https://github.com/redbaron76/navbar-native/issues/21

更新答案：你应该用容器包装导航栏

import React, { Component } from 'react';
import { View } from 'react-native';
import { Container, Navbar } from 'navbar-native';
class ReactNativeProject extends Component {
render() {
return (
<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!')}
}]}
/>
... other stuff ...
</Container>
);
}
}