Question

我是初学者，对本地人有反应。我有自定义的可重用组件。我正在尝试建立登录表单，如下所示：

我在LoginForm.js中使用了代码

import Button from './common/Button';
import Card  from './common/Card';
import CardItem from './common/CardItem';
class LoginForm extends Component {
constructor(){
  super();
  this.state = {
    title: 'Title from state'
  };
}

  render() {
    return(
        <Card>
          <CardItem>
           <Button>Login</Button>
          </CardItem>
        </Card>
    );
  }
}

Card.js

import React from 'react';
import { View, StyleSheet } from 'react-native';

const Card = (props) => {
  return(
    <view>
      { props.children }
    </view>
      );
    }

export default Card;

CardItem.js

import React from 'react';
import { View, StyleSheet } from 'react-native';

const CardItem = (props) => {
  return(
    <view style={styles.cardItem}>
      { props.children }
    </view>
  );
}
export default CardItem;

Button.js

import React from 'react';
import {TouchableOpacity, Text, StyleSheet} from 'react-native';

const Button = (props) =>{
  return(
    <TouchableOpacity onPress={props.onPress}>
      <Text>
        {props.children}
      </Text>
    </TouchableOpacity>
  );
}

export default Button;

并收到此错误

Invariant Violation: View config not found for name view
        in RCTText (at Text.js:145)
        in TouchableText (at Text.js:266)
        in RCTView (at View.js:43)
        in AnimatedComponent (at TouchableOpacity.js:256)
        in TouchableOpacity (at Button.js:6)
        in Button (at LoginForm.js:25)
        in view (at CardItem.js:6)
        in CardItem (at LoginForm.js:24)
        in view (at Card.js:6)
        in Card (at LoginForm.js:23)

如果我以<Text>作为示例，<Text>Login</Text>替换了代码LoginForm.js，它将正常工作。

请帮忙，我错过了什么？

Answer 1

如下所示更新您的Card.js和CardItem.js。应该是View，而不是view。

Card.js

import React from 'react';
import { View, StyleSheet } from 'react-native';

const Card = (props) => {
  return(
    <View>
      { props.children }
    </View>
      );
    }

export default Card;

CardItem.js

import React from 'react';
import { View, StyleSheet } from 'react-native';

const CardItem = (props) => {
  return(
    <View style={styles.cardItem}>
      { props.children }
    </View>
  );
}
export default CardItem;

不变违反：找不到名称视图的视图配置：React Native

1 个答案: