不变违规：未找到名称 div 的查看配置

Question

错误：

当我尝试在我的 android 设备上的 snak.expo.io 和 expo 客户端上使用已安装的 radioButton 包时，我收到此错误。我已经在网上搜索了解决方案，但无济于事。

App.js

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  AppRegistry,
  StatusBar,
} from 'react-native';
import { StackNavigator } from 'react-navigation'; // 1.0.0-beta.23
import UCI from './screens/UCI';


class App extends React.Component {
  static navigationOptions = {
    header: null,
  };

  render() {
    return (
      <View style={styles.container}>
        <StatusBar hidden={true} />
        <View style={styles.boxContainer}>
          <View style={[styles.boxContainer, styles.boxOne]}>
            <Text style={styles.paragraph}>Adinkra</Text>
          </View>

          <View style={styles.boxContainerToggle}>
            <TouchableOpacity
              style={[styles.boxContainer, styles.boxThree]}
              onPress={() => this.props.navigation.navigate('UCI')}>
              <Text style={styles.paragraph}>BEGIN</Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
  },
  boxContainer: {
    flex: 1, // 1:3
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'white',
  },

  boxContainerToggle: {
    flex: 1,
    flexDirection: 'row',
    padding: 20,
  },
  boxOne: {
    flex: 6, // 5:6
    justifyContent: 'space-around',
    alignItems: 'center',
  },
  boxThree: {
    flex: 1, // 1:6
    flexDirection: 'row',
    backgroundColor: 'skyblue',
    width: '50%',
    height: '100%',
  },

  paragraph: {
    margin: 24,
    fontSize: 27,
    fontWeight: 'bold',
    textAlign: 'center',
    color: '#34495e',
  },
});

const appScreens = StackNavigator({
  Index: { screen: App },
  UCI: { screen: UCI },
});

AppRegistry.registerComponent('Adinkra', () => appScreens);
export default appScreens;

UCI.js

import React, { Component } from 'react';
import { View, StyleSheet, TextInput } from 'react-native';
import { RadioGroup, RadioButton } from 'react-radio-buttons'; // 1.2.1

export default class UCI extends Component {
  render() {
    return (
      <View style={styles.container}>
        <TextInput
          style={{height: 40}}
          placeholder="Full Name"
          onChangeText={(text) => this.setState({text})}
        />
        
        <RadioGroup onChange={ this.onChange } horizontal>
          <RadioButton value="Male">Male</RadioButton>
          <RadioButton value="Female">Female</RadioButton>
        </RadioGroup>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Answer 1

react-radio-buttons 在内部使用 div，因此你不能将它用于 React Native。

查看来源：https://github.com/fedosejev/radio-buttons-react/blob/master/source/js/components/Application.jsx