Question

我是新来的响应Native，出现错误

不变违规：文本字符串必须在Text组件内呈现。

到目前为止，除文本框和按钮值外，我还没有使用文本字符串，但得到的错误是

我在下面共享我的代码

import React from 'react';
import { StyleSheet, Text , View } from 'react-native';
import { TextInput , Button  , Appbar} from 'react-native-paper';



class App extends React.Component {


  state  = {
    fanme : '',
    mname : ''
  }

  render(){

    return(

     <View style={styles.container}>

     <Appbar.Header><Appbar.Content title="Calculate lOVE%"/>  </Appbar.Header>

      <TextInput label='fname' />
      <TextInput label='mname'  />

      <Button style={{margin : 10}} icon="add-a-photo" mode="contained" onPress={() => console.log('Pressed')}>
    Calculate 
  </Button>


    </View>

    );
  }
}

export default App;

const styles = StyleSheet.create({
  container : {
    flex : 1 ,
    backgroundColor : '#fff',
  },
});

Answer 1

在您的Button组件内部

<Button style={{margin : 10}} icon="add-a-photo" mode="contained" onPress={() => console.log('Pressed')}>
    Calculate // <-- ERROR
 </Button>

您放置了Calculate字符串，可以将其与<Text> Calculate </Text>一起使用，也可以将按钮的本机属性与title="Clear button"一起使用，以便按钮组件像这样结束：

 <Button title="Calculate" style={{margin : 10}} icon="add-a-photo" mode="contained" onPress={() => console.log('Pressed')}/>

Answer 2

在react-native按钮中，使用title属性而不是按钮文本：

<Appbar.Header><Appbar.Content title="Calculate lOVE%"/></Appbar.Header>
<TextInput label='fname' />
<TextInput label='mname'  />
<Button title="Calculate" style={{margin : 10}} icon="add-a-photo" mode="contained" onPress={() => console.log('Pressed')}></Button>

更多详细信息，请访问https://facebook.github.io/react-native/docs/button.html#title

Answer 3

正如React Native所说，文本应该在文本组件中呈现！这是您的问题：

<Button style={{margin : 10}} icon="add-a-photo" mode="contained" onPress={() => console.log('Pressed')}>
   Calculate 
</Button>

应更改为：

<Button style={{margin : 10}} icon="add-a-photo" mode="contained" onPress={() => console.log('Pressed')}>
   <Text> Calculate </Text>
</Button>

或为Button使用标题道具，如下所示：

<Button title='Calculate' style={{margin : 10}} icon="add-a-photo" mode="contained" onPress={() => console.log('Pressed')} />

出现错误：必须在<Text>组件内呈现文本字符串

3 个答案: