react-native 证明内容中心导致项目在 android 上跳来跳去答案

【问题标题】：react-native justifying content center is causing items to jump around on androidreact-native 证明内容中心导致项目在 android 上跳来跳去
【发布时间】：2018-05-18 16:29:57
【问题描述】：

我正在尝试构建一个简单的登录屏幕。但是，当我试图证明内容居中时，元素不会停止上下跳跃。 .如果我删除 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'
    }
  }
});

【问题讨论】：

你能提供登录屏幕跳转的截图或gif吗？顺便说一句，您的登录屏幕代码没有任何问题。
我遇到了完全相同的问题，这是该问题的 .GIF。 i.gyazo.com/644cb6c6c309ce83ca7dae881f6342f1.gif

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

【解决方案1】：

在我自己的应用程序中尝试解决这个问题之后，我已经到了唯一的解决方案是将 React-Native 从 0.50.x 降级到 0.49.x 的地步——至少，这就是我最终解决的问题.

【讨论】：