- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
使用react-navigation,发现headerLeft没有响应?而且没有headerLeft,headerRight
class Message extends React.Component {
static navigationOptions = {
tabBarLabel: '消息',
headerTitle: () => (
<View style={styles.headerWrapper}>
<Text
adjustsFontSizeToFit
style={styles.headerText}>消息</Text>
</View>
),
tabBarIcon: ({ focused, tintColor }) => (
<Image
source={focused ? require('../images/clickmessage.png') :
require('../images/message.png')}
style={{ width: 26, height: 26, tintColor: tintColor }}
/>
),
headerLeft: ({ focused, tinColor }) => {
<Image
source={focused ? require('../images/clickmessage.png') :
require('../images/message.png')}
style={{ width: 26, height: 26, tintColor: tintColor }}
/>
}
};
render() {
return (
<View style={styles.container}>
<MessageContent />
</View>
);
}
headerLeft 和 headerRight 无效
最佳答案
您可以像这样左右使用标题:
static navigationOptions = ({navigation}) => {
return {
headerTitle: (
<View style={{flex: 1, alignSelf: 'center'}}>
<AppFontLoader>
<Text style={{
color: '#fff',
alignSelf: 'center',
...Platform.select({
ios: {
fontFamily: 'Some implemented font',
},
android: {
fontFamily: 'Another font for android',
}
}),
}}>Place you title here</Text>
</AppFontLoader>
</View>
),
headerRight: (
<TouchableOpacity onPress={() => navigation.navigate({routeName: 'PriceList'})}
style={{right: Platform.OS === 'ios' ? Dimensions.get("window").height < 667 ? '10%' : '5%' : '25%', backgroundColor: 'transparent', paddingLeft: 15}}>
<Image style={{width: 25, height: 25}} source={require('../../assets/icons/info2.png')}/>
</TouchableOpacity>
),
headerLeft: (
<TouchableOpacity onPress={() => navigation.goBack(null)} style={{left: Dimensions.get("window").height < 667 ? '8%' : '3%', backgroundColor: 'red', width: '100%'}}>
<Image style={{width: 30, height: 30}} source={require('../../assets/icons/back-icon-50x50.png')}/>
</TouchableOpacity>
),
headerStyle: {
backgroundColor: '#14b6e4',
},
headerTintColor: '#fff',
};
};
关于react-native - 如何使用 react-navigation 的 headerLeft 和 headerRight,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49629150/
我创建了一个堆栈导航器: import {createStackNavigator} from '@react-navigation/stack'; const TheStack = createSt
我是 react-native 和 formik 的新手,我遇到了我试图建立的这个问题。 如何使用 Formik 在 headerRight 中触发函数?我有 updateCorporation 函数
我仍然试图理解这个 react 导航 5.0。 仅供引用,我正在使用 expo,现在从一页导航到另一页没有问题, 问题是当我为 headerRight 放置导航时。 我将 headerRight 放在
我想知道有没有一种方法可以使用 headerRight onPress 来执行诸如调用 Alert 之类的操作: 我在 MyPet.js 中有一个函数,代码如下: _alert=()=>{ ale
为什么这不起作用?: headerRight: this.props.navigation.navigate('MenuCQ')}/> 按下后,expo 就会崩溃,根本没有错误消息。 onPress
使用react-navigation,发现headerLeft没有响应?而且没有headerLeft,headerRight class Message extends React.Component
我想调用 headerRight 按钮点击屏幕上的函数。我在 useEffect 中将 func 作为参数传递,如下所示。 useEffect(() => { navigation.setPa
我是一名优秀的程序员,十分优秀!