React Native 显示黑屏答案

【问题标题】：React Native showing blank screenReact Native 显示黑屏
【发布时间】：2015-05-22 01:31:19
【问题描述】：

我正在使用 react-native 最新版本 0.4.4 并安装了 react-native-side-menu 和 react-native-carousel 组件。

由于某种原因，当我运行该应用程序时，它没有显示任何内容。

代码实例化了一个带有sidemenu和contentview的视图。 contentview 用于显示包含三个按钮的主页，当有人点击浏览时，它会将他们带到使用 navigatorios 组件的搜索页面。

样式表有问题吗？

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  Component,
  NavigatorIOS,
  View,
  TouchableHighlight,
  TextInput,
} = React;

var SideMenu = require('react-native-side-menu');

var Menu = React.createClass({
  about: function() {
    this.props.menuActions.close();
  },

  render: function() {
    return (
      <View>
        <Text>Menu</Text>
        <Text onPress={this.about}>About</Text>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  searchView: {
    flexDirection: 'row',
    padding: 25,
    marginTop: 100,
  },
  text: {
    color: 'black',
    backgroundColor: 'white',
    fontSize: 30,
    margin: 80
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#F5FCFF',
  },
  flowRight: {
    flexDirection: 'column',
    padding: 25,
    alignItems: 'center',
    alignSelf: 'stretch',
    marginTop: 100,
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  button: {
    height: 36,
    flex: 1,
    flexDirection: 'row',
    backgroundColor: '#009D6E',
    borderColor: '#008C5D',
    borderWidth: 1,
    borderRadius: 8,
    marginBottom: 10,
    alignSelf: 'stretch',
    justifyContent: 'center'
  },
  buttonText: {
    fontSize: 18,
    color: 'white',
    alignSelf: 'center'
  },
});

class Search extends Component {
  render() {
    return (
      <View style={styles.searchView}>
      <TextInput
        style={{ flex: 2, height: 40, borderColor: 'gray', borderWidth: 1, padding: 5, borderRadius: 5}}
        onChangeText={(text) => this.setState({input: text})}
        placeholder="Search Appointment" />
      <TextInput
        style={{ flex: 1, height: 40, borderColor: 'gray', borderWidth: 1, padding: 5, borderRadius: 5}}
        onChangeText={(text) => this.setState({input: text})}
        placeholder="Location" />
      </View>
    );
  }
}

class Welcome extends React.Component {
  onExplorePressed() {
    this.props.navigator.push({
      title: 'Explore',
      component: Search,
    });
  }

  render() {
    return (
      <View style={styles.flowRight}>

        <Text style={styles.welcome}>
          Welcome to Docit!
        </Text>

        <TouchableHighlight style={styles.button} underlayColor='#009D3E'>
          <Text style={styles.buttonText}>Sign In with Facebook</Text>
        </TouchableHighlight>

        <TouchableHighlight style={styles.button} underlayColor='#009D3E'>
          <Text style={styles.buttonText}>Sign In with Email</Text>
        </TouchableHighlight>

        <Text style={styles.welcome}>OR</Text>

        <TouchableHighlight
          onPress={this.onExplorePressed.bind(this)}
          style={styles.button}
          underlayColor='#009D3E'>
          <Text style={styles.buttonText}>Explore Something</Text>
        </TouchableHighlight>

      </View>
    );
  }
}


class ContentView extends Component {
  render() {
    return (
      <NavigatorIOS
        style={styles.container}
        initialRoute={{
          component: Welcome,
          title: 'Welcome',
        }}/>
    )
  }
}

var Docit = React.createClass({
  render: function() {
    var menu = <Menu navigator={navigator}/>;

    return (
        <SideMenu menu={menu}>
          <ContentView/>
        </SideMenu>
      );
  }
});

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

我在这里做错了吗？

【问题讨论】：

我使用 react-native init 在新项目上运行了相同的代码，它可以工作。发生了什么事？

标签： ios facebook react-native

【解决方案1】：

我发现 react-native-carousel 组件与侧边栏菜单组件冲突并显示空白屏幕。我在他们的存储库上发布了这个问题。

简单的解决方案是从任何地方移除 react-native-carousel 组件，甚至从 node_modules/ 里面的文件夹中。

【讨论】：

【解决方案2】：

您的反应版本可能不同步。当与 iOS 应用程序捆绑的反应版本与打包程序正在运行的版本不同时，我遇到过这种情况。

如果您使用的是 cocoapods，请确保您的 podfile 中的 react 版本与您的 package.json 相同。

【讨论】：