Question

我是React的新手，我试图制作一个应用程序，其中的标题（“ Hello World”）会淡出并在屏幕上显示按钮，以便其重定向

我试图在我的主屏幕上实现不透明的可触摸按钮，但此错误：“不变违反：必须在组件内呈现文本字符串”一直弹出。

我尝试在整个代码中搜索所有未封闭的文本字符串和方括号，但没有找到任何

import React from 'react';
import { Animated, View, Text, ButtonText, Button,  AppRegistry, Image, ImageBackground, StyleSheet,  TextInput, TouchableOpacity} from 'react-native';
import { createAppContainer, createStackNavigator, StackActions, NavigationActions } from 'react-navigation'; // Version can be specified in package.json


//Hello World Animation 
class FadeInView extends React.Component {
  state = {
    fadeAnim: new Animated.Value(0),  
  }

  componentDidMount() {
    Animated.timing(                  
      this.state.fadeAnim,            
      {
        toValue: 1,                   
        duration: 8000,              
      }
    ).start();                      
  }

  render() {
    let { fadeAnim } = this.state;

    return (
      <Animated.View                
        style={{
          ...this.props.style,
          opacity: fadeAnim,         
        }}
      >
        {this.props.children}
      </Animated.View>
    );
  }
}
//End of Hello World Animation 


//Styles 
const styles = StyleSheet.create({
  greetingText: {
    color: 'white',
    fontWeight: 'bold',
    fontSize: 30,
  },

  container: {
    paddingTop: 60,
    alignItems: 'center'
  },
button: {
    marginBottom: 30,
    width: 260,
    alignItems: 'center',
    backgroundColor: '#2196F3'
  },
  buttonText: {
    padding: 20,
    color: 'white'
  }

});
//End of Styles 


//HomeScreen 
class HomeScreen extends React.Component {
  render() {
    let pic = {
      url: 'https://media3.giphy.com/media/3ohhwNqFMnb7wZgNnq/giphy.gif'
    };
    return (
       <ImageBackground source={pic} style={{width: '100%', height: '100%'}}>

      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <FadeInView style={{width: 250, height: 60, backgroundColor: 'powderblue'}}>
          <Text style={{fontSize: 30, textAlign: 'center', margin: 10}}>Hello, World </Text>
        </FadeInView>


         <TouchableOpacity 
          onPress={() => {
            this.props.navigation.dispatch(StackActions.reset({
              index: 0,
              actions: [
                NavigationActions.navigate({ routeName: 'Details' })
              ],
            }))
          }}
          >
        <View style={styles.button}>
            <Text style={styles.buttonText}>TouchableOpacity</Text>
          </View>
        </TouchableOpacity>
        />


      </View>
      </ImageBackground>
    );
  }  
}
//End of HomeScreen 

//Second page (aka DetailsPage)
class DetailsScreen extends React.Component {
   constructor(props) {
    super(props);
    this.state = {text: ''};
  }
render() {
    return (
       <View style={{padding: 10}}>
        <TextInput
          style={{height: 40}}
          placeholder="Type here to translate!"
          onChangeText={(text) => this.setState({text})}
          value={this.state.text}
        />

      </View>
    );
  }  
}
//End of Second page 

//HomePage and DetailsPage Directory
const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen,
  },
  Details: {
    screen: DetailsScreen,
  },

}, {
    initialRouteName: 'Home',
});

export default createAppContainer(AppNavigator);

最终，我希望“可触摸”按钮出现在我的主屏幕上，以便它可以重定向到DetailsPage。我使用StackNavigator作为实现此目的的一种方法，但是我不确定是否将我的知识与StackNavigator和按钮正确地结合起来以正确安装它。

Answer 1

您的错误是额外的“ />”。您可以使用Prettier和eslint之类的扩展程序来轻松捕获这些错误。

更漂亮：https://github.com/prettier/prettier ESlint：https://eslint.org/docs/user-guide/getting-started

 <View style={styles.button}>
        <Text style={styles.buttonText}>TouchableOpacity</Text>
      </View>
    </TouchableOpacity>
    />       <--  //Here is your mistake

尝试实现可触摸按钮，但是“不断违反：文本字符串必须在<Text>组件中呈现”不断弹出

1 个答案: