I see only a blank page

[saeed2402]

Hi, I see only a blank page when I run my application. Here's the contenct of my index.android.js:

/**

• Sample React Native App
• https://github.com/facebook/react-native
• @flow */

import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Image } from 'react-native'; import TabNavigator from 'react-native-tab-navigator';

var HomeView= require('./home'); var ProfileView= require('./profile');

class androidTabs2 extends Component { constructor(props) { super(props); this.state = { selectedTab: 'home' }; console.log('in Root constructor');

}

render() { return (

} renderSelectedIcon={() => } badgeText="1" onPress={() => this.setState({ selectedTab: 'home' })}> this.setState({ selectedTab: 'profile' })}>

);

  }
}

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,
  },
});

AppRegistry.registerComponent('androidTabs2', () => androidTabs2);

Help please!

[saeed2402]

Anybody has any ideas what's going on here?

[maniyadv]

Even I see blank page too. Any help?

[toearth]

I found that if using a navigator in the TabNavigator.Item, the navigator doesn't work.

[saeed2402]

Is it official? This tabbar doesn't work with navigator?

[toearth]

I find this in comment below // This works around a breaking change in css-layout where setting flexBasis needs to be set explicitly, instead of relying on flex to propagate. // We check for it by seeing if a width/height is provided along with a flexBasis of 0 and the width/height is laid out as 0. https://github.com/facebook/react-native/blob/master/React/Views/RCTShadowView.m So, tabbar is OK, react-native has a breaking change in css-layout. After I set width by flexBasis: 365, I can see my page.

[johnnynode]

try this:

import Home from './pages/home/Home'; // your home page
import Category from './pages/category/Category'; // your Category page
import Square from './pages/square/Square';  // your Square page
import My from './pages/my/My';  // your My page

let tabBarHeight = 50;

<TabNavigator
    tabBarStyle={{height: tabBarHeight}}>
    <TabNavigator.Item
        selected={this.state.selectedTab === 'home'}
        title="首页"
        onPress={() => this.setState({selectedTab: 'home'})}>
        <Home />
    </TabNavigator.Item>
    <TabNavigator.Item
        selected={this.state.selectedTab === 'category'}
        title="分类"
        onPress={() => this.setState({selectedTab: 'category'})}>
        <Category />
    </TabNavigator.Item>
    <TabNavigator.Item
        selected={this.state.selectedTab === 'square'}
        title="广场"
        onPress={() => this.setState({selectedTab: 'square'})}>
        <Square />
    </TabNavigator.Item>
    <TabNavigator.Item
        selected={this.state.selectedTab === 'my'}
        title="个人"
        onPress={() => this.setState({selectedTab: 'my'})}>
        <My />
    </TabNavigator.Item>
</TabNavigator>

Pay attention to your style! It works fine for me!

[songxuhua]

Even I see blank page too on android. Any help?

[andaGS]

i see blank page too,please help i use with navigator

[ptomasroos]

Will close since this issue is more than a year, feel free to a open a new if this is still a issue.