React Native 显示黑屏

Posted 2023-03-15

【中文标题】React Native 显示黑屏

【英文标题】：React Native showing blank screen

【发布时间】：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 在新项目上运行了相同的代码，它可以工作。发生了什么事？

【参考方案1】：

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

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

【参考方案2】：

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

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