我开始探索使用React Native构建移动应用程序并运行,即使经过了许多教程,仍然遇到了重复的问题。
我通过react-native init MyApp
命令生成了一个新的应用程序 - 我注意到在App.js
文件中包含了这些样式定义:
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,
},
});
然而,如果我决定仅使用
export default class App extends Component {
render() {
return (
<View>
<Header />
</View>
);
}
}
在模拟器中,我只能看到黑屏 - 要想“看到”什么东西,我需要添加样式定义,如下:
<View style={styles.container}>
<Header />
</View>
如何避免每次都要指定<View>
的样式定义?屏幕背景默认是黑色还是我忽略了些什么?
到目前为止,开发非常混乱和困难,我基本上花了整个下午重新启动iOS应用程序(热重载并不总是起作用),以查看应用程序中的新代码更改,而不是构建一些新功能。
我是否在做一些根本性错误(比如使用错误的开发工具)?
CMD+R
或react-native run-ios
。我通常使用CMD+R
来刷新设备上的捆绑包。如果我对本地代码进行了更改,安装了新的依赖项,则使用react-native run-ios
更新捆绑包是最好的选择,然后我可以回到使用CMD+R
。 - Andrewreact-native-debugger
,它比在 Chrome 浏览器中使用窗口更好。https://github.com/jhen0409/react-native-debugger - Andrewreact-native-debugger
的好处在于,如果你稍微调整一下中间件并开始使用redux
,你就可以在调试器中看到你的 redux 状态和操作。 - Andrew