时间戳

首页 > 解决方案 > React Native View 不显示任何内容

react-native - React Native View 不显示任何内容

问题描述

我按照教程Here为我的应用程序设置了一个抽屉导航器，我所做的几乎与本指南提到的所有内容相同，但我的输出是这样的

在此处输入图像描述

不过根据指南，根据我的代码，白色空屏幕中间应该有文本。这让我觉得我的主文件的 View 标记不起作用或者由于某种原因它没有渲染但是渲染函数确实被调用了，我看到函数里面的日志和 console.log 确实显示在那里，所以我只是无法弄清楚这里的问题是什么。

这是我的代码：

主页.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>
);
}
}

标签： react-native

解决方案

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

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 属性是唯一受支持的（不支持增长/收缩）。

更多信息：瑜伽

推荐阅读