Question

我正在尝试学习如何将stacknavigator用于我的react-native应用程序。但是一旦我在页面层次结构中处于第2级，系统就会一直崩溃，我收到消息：

更新视图的属性“accessibilityLabel”时出错：RTCView

我所有的应用程序都提供了一个单词Region。如果单击“区域”，您将看到“常规”一词。当你按下General这个词时，你会看到一个空屏幕，但是我得到了上面提到的错误和崩溃。

这是我的简单项目的代码：

index.android.js

import React, { Component } from 'react';
import App from './components/Home';
import {
  AppRegistry,
  View
} from 'react-native';

export default class myapp extends Component {
  render() {
    return (
        <App />
    );
  }
}


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

组件/ Home.js

import React, { Component } from 'react';
import {StackNavigator} from 'react-navigation';
import Regions from './Regions';
import Compatibility from './Compatibility';

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Linking
} from 'react-native';

class Home extends Component {
  static navigationOptions = {
    title: 'Login',
    headerStyle: {
        backgroundColor:'#000000'
            },
    headerTitleStyle: {
        color:'#fff'
    }
  };
  render(){
    const {navigate} = this.props.navigation;
    return (
      <View style={styles.container}>
        <Text style={styles.instructions} onPress={()=>navigate('Regions',{realm:'blah'})}>
            Regions
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },

  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});


const myscreens = StackNavigator({
  Home: {screen: Home},
  Regions:{screen:Regions},
  Compatibility:{screen:Compatibility}
});

export default myscreens;

组件/ Regions.js

import React, { Component } from 'react';
import {StackNavigator} from 'react-navigation';

import {
  Text,
  View,
  FlatList
} from 'react-native';

export default class Regions extends Component {
  static navigationOptions = {
    title: 'Pick Region',
    headerStyle: {
        backgroundColor:'#F00'
    },
    headerTitleStyle: {
        color:'#fff'
    },
    headerTruncatedBackTitle:{
        color:'#fff'
    },
    headerBackTitle:{
        color:'#fff'
    },
    headerBackTitleStyle:{
        color:'#fff'
    },
    headerTruncatedBackTitle:{
        color:'#fff'
    }
  };
    constructor(props)
    {
        super(props);
    }
  render() {


    const {navigate} = this.props.navigation;

    let data = [
    {regionName:'General',numOfDimensions:2}
    ];

    return (
        <FlatList
          data={data}
          keyExtractor={(item, index) => index}
          renderItem={({item}) => <Text onPress={()=>navigate('Compatibility',{item:item})}>{item.regionName}</Text>}
        />
    );

  }
}

组件/ Compatibility.js

import React, { Component } from 'react';

import {
  Text,
  View,
  FlatList
} from 'react-native';

export default class Compatibility extends Component {
  static navigationOptions = {
    title: 'Pick Region',
    headerStyle: {
        backgroundColor:'#F00'
    },
    headerTitleStyle: {
        color:'#fff'
    },
    headerTruncatedBackTitle:{
        color:'#fff'
    },
    headerBackTitle:{
        color:'#fff'
    },
    headerBackTitleStyle:{
        color:'#fff'
    },
    headerTruncatedBackTitle:{
        color:'#fff'
    }
  };

    constructor(props)
    {
        super(props);
    }

  render() {

    console.log('Compatibility');
    return <View></View>;
  }
}

我做错了什么？我只是想看看空的兼容性屏幕，并摆脱这种崩溃。

Answer 1

反应导航没有问题。您可以使用react navigation进行嵌套。我已经使用了它并且它正常工作。当我测试你的代码时，我发现在你的代码里面有一个错误产生了这个错误而不是反应导航。在导航选项中的 Regions 类的代码中，您刚刚在prop中声明了一个带有字符串标题的对象样式。有关更多说明，请查看以下代码： -

static navigationOptions = {
    title: 'Pick Region',
    headerStyle: {
        backgroundColor:'#F00'
    },
    headerTitleStyle: {
        color:'#fff'
    },
    headerTruncatedBackTitle:{
        color:'#fff'
    },

headerTruncatedBackTitle =======＆gt;＆gt;＆gt;＆gt;＆gt;这是仅接受字符串的标题，这不是标题截断标题的样式

    headerBackTitle:{
        color:'#fff'
    },

headerBackTitle =======＆gt;＆gt;＆gt;＆gt;＆gt;这是仅接受字符串的标题，这不是标题背面标题的样式

    headerBackTitleStyle:{
        color:'#fff'
    },
    headerTruncatedBackTitle:{
        color:'#fff'
    }
};

我只是运行了你的代码并且在纠正了这些事情之后它的工作正常。如果您仍有任何疑问，请告诉我们。）

StackNavigator无法嵌套多个级别？

1 个答案: