React Native показывает пустой экран

Question

Я использую последнюю версию релиза 0.4.4 и устанавливаю компоненты с реакцией на основе родной и интерактивной карусели.

По какой-то причине, когда я запускаю приложение, оно ничего не показывает.

Код создает экземпляр представления с помощью sidemenu и contentview внутри. contentview предназначен для отображения главной страницы, содержащей три кнопки, и когда кто-то нажимает кнопку «исследовать», она выводит их на страницу поиска с помощью компонента navigatorios.

Есть ли проблема с StyleSheet?

'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); 

я делаю что-то здесь ??

Answer 1

Я понял, что компонент, реагирующий на карусель, противоречит компоненту меню боковой панели и показывает пустой экран. Я разместил вопрос в своем репозитории.

Простым решением является удаление компонента-реагирующей карусели везде, даже из node_modules /, папки внутри.

Answer 2

Ваши реактивные версии могут быть не синхронизированы. У меня это случилось со мной, когда реакционная версия, связанная с приложением iOS, отличается от версии, с которой работает пакет.

Если вы используете cocoapods, убедитесь, что соответствующая версия в вашем подкадре совпадает с вашим пакетом. Json.