react-native - 标题栏不可见
问题描述
我对 React Native 很陌生,我现在正在尝试一些东西。我还让第一个演示应用程序运行顺利。
现在我想测试教程中的示例,并在右上角添加一个带有窗口标题的标题栏和一个按钮。为此,我只是扩展了 MyNewProject。但是,如果我现在启动应用程序,顶部不会出现任何栏,只会显示窗口中间的文本。我究竟做错了什么?
这是程序代码:
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
type Props = {};
export default class App extends Component<Props> {
static navigationOptions = {
title: 'My new project',
headerRight: (
<Button
onPress={() => Alert.alert('This is a button!')}
title='Info'
/>
),
};
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
解决方案
尝试改变这个
static navigationOptions = {
title: 'My new project',
headerRight: (
<Button
onPress={() => Alert.alert('This is a button!')}
title='Info'
/>
),
};
对此:
static navigationOptions = props => { return {
title: 'My new project',
headerRight: (
<Button
onPress={() => Alert.alert('This is a button!')}
title='Info'
/>
),
}
};
推荐阅读
- python - 从 python 脚本调用 tee 命令时未创建文件
- laravel - Laravel 7:访问仅管理员角色的 url 时重定向到域
- arrays - C - 变量“ch1”周围的堆栈已损坏
- algorithm - 在一组节点中找到最大距离
- python - 使用辛普森规则在两个函数之间集成
- javascript - 将对象转换为数组而不将 Object.entries 的键和值放入 JavaScript 中的字符串
- php - 获取给定日期字段的月份和年份
- flutter - 新标签时webview_flutter可以打开对话框吗
- c# - 如何在 iOS 扩展中使用 Xamarin Forms 全局样式
- python-3.x - 在数据框中仅保留第一次出现的连续重复值