作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我按照https://reactnavigation.org/docs/en/tab-based-navigation.html的指示进行操作在我的应用程序中创建导航。
这是我的 Navigation.js 文件代码
import React from 'react';
import { Text, View } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
</View>
);
}
}
class SettingsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
);
}
}
const TabNavigator = createBottomTabNavigator({
Home: { screen: HomeScreen },
Settings: { screen: SettingsScreen },
});
const TabNav = createAppContainer(TabNavigator);
export default TabNav;
我想将其导入到我的 App.js 文件中并将其用作导航。这是我的 App.js 文件
import React from 'react';
import {Text,View,Button} from 'react-native';
import TabNav from './components/CustomerDashboard/Navigation';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<View>
<TabNav></TabNav>
</View>
);
}
}
但这给了我一个空的白屏。我该如何解决这个问题?
最佳答案
您需要向 View
添加样式在你的App.js
里面如果你给它的 flex 值为 1,它会扩展以覆盖可用空间。
您还可以关闭您的TabNav
组件的方式如下:
<TabNav />
而不是使用<TabNav></TabNav>
以下是我更新您的 App.js
的方法
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<View style={{flex: 1}}>
<TabNav />
</View>
);
}
}
关于javascript - 如何在React Native中的App.js中使用navigation.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54910423/
我是一名优秀的程序员,十分优秀!