react-native对内容中心的反应导致项目在android

时间:2017-12-05 05:00:54

标签: android css react-native flexbox wix-react-native-navigation

我正在尝试构建一个简单的登录屏幕。然而,当我试图证明内容居中时,元素不会停止上下跳跃。 。如果我删除flex或justifyContent属性,它会停止跳转。我的代码看起来像这样

export default class LoginScreen extends React.Component {

  render() {
    return (
      <View style={Styles.container} >
        <Text>Hello world</Text>
     </View>
  )}



let Styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    // padding: 15,
    // backgroundColor: 'red',
    justifyContent: 'center',
    alignItems: 'center',
  },
)

我的App.js看起来像这样

import { Platform } from 'react-native';
import { Navigation } from 'react-native-navigation';
import registerScreens from './app/Screens';

import {
  AppRegistry,
  Text,
} from 'react-native';
registerScreens();

let tabs = [
    {
      label: 'Login',
      screen: 'tasks.LoginScreen', // this is a registered name for a screen
      icon: require('./assets/account_circle.png'),
      // selectedIcon: require('../img/one_selected.png'), // iOS only
      title: 'Hello world'
    },
    {
      label: 'Two',
      screen: 'tasks.CreateUserScreen',
      icon: require('./assets/account_circle.png'),
      // selectedIcon: require('../img/two_selected.png'), // iOS only
      title: 'Screen Two'
    }
  ]

Navigation.startTabBasedApp({
  tabs,
  animationType: Platform.OS === 'ios' ? 'slide-down' : 'fade',
  tabsStyle: {
    tabBarBackgroundColor: '#003a66',
    tabBarButtonColor: '#ffffff',
    tabBarSelectedButtonColor: '#ff505c',
    tabFontFamily: 'BioRhyme-Bold',
  },
  appStyle: {
    tabBarBackgroundColor: '#003a66',
    navBarButtonColor: '#ffffff',
    tabBarButtonColor: '#ffffff',
    navBarTextColor: '#ffffff',
    tabBarSelectedButtonColor: '#ff505c',
    navigationBarColor: '#003a66',
    navBarBackgroundColor: '#003a66',
    statusBarColor: '#002b4c',
    tabFontFamily: 'BioRhyme-Bold',
  },
  drawer: {
    left: {
      screen: 'tasks.LoginScreen'
    }
  }
});

1 个答案:

答案 0 :(得分:0)

在我自己的应用程序中尝试解决此问题之后,我已经达到了唯一的解决方案是将React-Native从0.50.x降级到0.49.x的程度 - 至少,这个问题是是什么修复了我的目的。