Question

我正在尝试渲染一个细分，该细分将根据选择的内容来渲染“照片”或“评论”组件。 renderSegments函数正在运行，console.log（'Rendered Photos'）正在运行。问题似乎是我如何返回照片组件。

“照片”组件应该只是将文本“照片”呈现到View.js屏幕的ScrollView中。

错误：

错误：永久违反：永久违反：对象无效作为React子对象（找到：带有键{_40，_65，_55，_72}的对象）。如果您本打算渲染子级集合，而是使用数组。

Photos.js

// Imports: Dependencies
import React, { Component } from "react";
import { Dimensions, View, SafeAreaView, StyleSheet, Text } from 'react-native';

// Screen Dimensions
const { height, width } = Dimensions.get('window');

// Component: Photos
export default class Photos extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.photos}>Photos</Text>
      </View>
    )
  }
}

// Styles
const styles = StyleSheet.create({
  container: {
    width: width,
  },
  photos: {
    fontFamily: 'System',
    fontSize: 24,
    fontWeight: '700',
    color: '#000',
  },
});

View.js

// Imports: Dependencies
import React, { Component } from "react";
import { Dimensions, SafeAreaView, ScrollView, StyleSheet, Text, View } from 'react-native';
import { Container, Header, Left, Body, Right, Button, Icon, Title, Segment, Content } from 'native-base';

// Imports: Components
import Photos from '../components/Photos';
import Reviews from '../components/Reviews';

// Screen Dimensions
const { height, width } = Dimensions.get('window');

// Screen: View
export default class View extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      segmentSelected: 'Photos',
    };
  }

  // React Navigation: Options
  static navigationOptions = {
    headerStyle: {
      elevation: 0,
      shadowOpacity: 0,
      borderBottomWidth: 0,
    },
  };

  // Render Segments (Photos/Reviews)
  renderSegments = async () => {
    try {
      console.log('Rendering Segments');

      if (this.state.segmentSelected === 'Photos') {
        console.log('Rendered Photos');
        return (
          <Photos />
        )
      }
      if (this.state.segmentSelected === 'Reviews') {
        console.log('Rendered Reviews');
        return (
          <Reviews />
        )
      }
    }
    catch (error) {
      console.log(error);
    }
  }

  render() {
    return (
      <SafeAreaView style={styles.container}>
        <View style={styles.segmentContainer}>
          <Segment style={{ width: width }} style={{ backgroundColor: '#fff'}}>
            <Button
              first
              active={this.state.segmentSelected === 'Photos' ? true : false}
              onPress={() => this.setState({ segmentSelected: 'Photos' })}
            >
              <Text style={{ color: this.state.segmentSelected === 'Photos' ? '#fff' : '#007AFF'}}>               Photos              </Text>
            </Button>
            <Button
              last
              active={this.state.segmentSelected === 'Reviews' ? true : false}
              onPress={() => this.setState({ segmentSelected: 'Reviews' })}
            >
              <Text style={{ color: this.state.segmentSelected === 'Reviews' ? '#fff' : '#007AFF'}}>              Reviews              </Text>
            </Button>
          </Segment>
        </View>

        <ScrollView style={{ backgroundColor: 'green' }}>
          <View>
            {this.renderSegments()}
          </View>
        </ScrollView>
      </SafeAreaView>
    )
  }
}

// Styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
    // justifyContent: 'center',
    alignItems: 'center',
    width: width,
  },
  segmentContainer: {
    marginTop: 7,
    marginBottom: 7,
    borderColor: '#999999',
    width: width,
    borderBottomWidth: .2,
  },
  text: {
    fontFamily: 'System',
    fontSize: 16,
    fontWeight: '400',
    color: '#222222',
  },
});

不变违规错误对象作为React子代无效

0 个答案: