反应本机视图不显示任何内容

Question

我按照教程Here设置了我的应用的抽屉式导航器，我所做的几乎所有事情都与本指南中提到的相同，但我的输出是这样的

但是根据指南，根据我的代码，在空白屏幕的中间应该有文本。这使我认为主文件的View标记由于某些原因无法正常工作或无法呈现，但是render函数确实被调用，我看到了日志，并且函数中的console.log确实显示在此处，所以我只是无法弄清楚问题出在哪里。

这是我的代码：

Home.js

class Home extends Component{

render() {

    console.log("I AM HERE")

    return (
        <View style={styles.container}>
            <Text style={styles.text}>Home Page</Text>
        </View>

    )
}
}

styles = StyleSheet.create({

container: {
    flex: 1,
    paddingTop: 20,
    alignItems: 'center',
    marginTop: 50,
    justifyContent: 'center',
},
text: {

    fontSize: 50,
    color: 'red'
}
})

HomeRoute.js

  const ROUTES = createStackNavigator({
  [ROUTE_NAMES.HOME]: {
  screen: Home,
  navigationOptions: ({ navigation }) => ({
  title: 'Home',
  headerLeft: <SideDrawer navigationProps={navigation} />,
  headerStyle: {
    backgroundColor: '#FF9800',
  },
  headerTintColor: '#fff',
}),
},
});

const HOME_ROUTES = createAppContainer(ROUTES);

export default HOME_ROUTES;

SideDrawer.js

export default class NavigationDrawerStructure extends Component {
toggleDrawer = () => {
this.props.navigationProps.toggleDrawer();
};
render() {
return (
  <View style={{ flexDirection: 'row' }}>
    <TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
      {/*Donute Button Image */}
      <Image
        source={drawerImage}
        style={{ width: 25, height: 25, marginLeft: 5 }}
      />
    </TouchableOpacity>
  </View>
);
}
}

Answer 1

CSS flexbox与Facebook实现的Flexbox有很大的区别。有很多共同点，但默认值却大不相同。具体来说：

Everything is displayed: flex by default. All the behaviors of block and inline-block can be expressed in term of flex but not the opposite.

flex：仅当在同一级别上具有不同的flex值的组件很少（flex：1，flex：3）时，才使用属性：这意味着第二个元素应比第一个元素大3倍。 flex属性是唯一受支持的属性（不支持增长/收缩）。

更多信息：yoga

Answer 2

您是否有App.js文件？我在您的帖子中看不到它。如果没有，则应添加以下代码：

import React from 'react';
import { View } from 'react-native';
import HomeRoute from './your_path/HomeRoute.js';

export default class App extends React.Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <HomeRoute/>
        <FlashMessage position="top" />
      </View>
    );
  }
}

否则，我会很好奇您的App.js。