阵营本地导航加入汉堡图标
问题描述:
进出口特林添加汉堡包图标,打开抽屉上的反应,native.but即时得到这个错误阵营本地导航加入汉堡图标
对象是不是一个做出反应的孩子有效(发现:对象,具有键{}左)。如果您打算渲染一组儿童,请改用数组,或者使用React附加组件中的createFragment(object)来包装对象。
Check the render method of `View`.
这是routes.js
import { StackNavigator, TabNavigator, DrawerNavigator } from 'react-navigation';
const DrawerIcon = ({ navigate }) => {
return(
<Icon
name = "md-menu"
size = {38}
color = "black"
style = {{paddingLeft : 20}}
onPress = {() => navigate('DrawerOpen')}
/>
);
};
export const Stack1 = StackNavigator({
Screen1: {
screen: screen1,
navigationOptions: {
header: (props) => ({
left: <DrawerIcon { ...props } />
}),
}
},
Screen2: {
screen: screen2,
},
Screen3: {
screen: screen3,
},
})
export const Drawer = DrawerNavigator({
Home:{
screen: Stack1,
navigationOption: {
brawerLabel: 'Home',
}
},
Camera:{
screen: Stack2,
navigationOption: {
brawerLabel: 'Camera',
}
},
Info:{
screen: Stack3,
navigationOption: {
brawerLabel: 'Info',
}
}
})
我怎样才能解决这个error.Thanks。
答
static navigationOptions = ({ navigation }) => ({
headerTitle: "Home",
...css.header,
headerLeft:
<View style={{paddingLeft:16}}>
<Icon
name="md-menu"
size={30}
color='white'
onPress={() => navigation.navigate('DrawerOpen')} />
</View>,
})
密切关注我添加了不断的呼叫报头
export const header = {
// background
headerStyle: {
backgroundColor: colors.secondary_blue,
},
// arrows
headerTintColor: colors.text_light,
// my own styles for titleAndIcon
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
paddingLeft: 8,
},
// my own styles for titleAndIcon
text: {
paddingLeft: 8,
color: colors.text_light,
fontFamily: values.font_body,
fontSize: values.font_title_size,
}
};
答
export default class Home extends React.Component { static navigationOptions = { headerTitle: "User Index", headerRight: <Button title="Info" onPress={()=> alert('right button')} />, }; render(){ return(<UserTabNavigator />); } };
我有同样的问题,上面的style.js工作对我来说这条线
headerRight: <Button title="Info" onPress={()=> alert('right button')} />,
答
没有一个以前的答案是非常可扩展的,所以我认为我会重视我的解决方案。为了保持完整性,我在示例中使用了react-native-vector-icons
。
import { StackNavigator, DrawerNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/Octicons';
const MenuIcon = ({ navigate }) => <Icon
name='three-bars'
size={30}
color='#000'
onPress={() => navigate('DrawerOpen')}
/>;
const Stack = {
FirstView: {
screen: Login,
navigationOptions: ({ navigation }) => ({
headerRight: MenuIcon(navigation)
})
}
};
// ...Remaining navigation code etc.
这使得你会想相同的图标打开抽屉(这确实应该是大多数用例)的假设。
但是当我在侧面调用'this.props.navigation.navigate('DrawerOpen')'headerRight: