出現錯誤：文本字符串必須在 <Text> 零件

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的本機屬性，這樣您的按鈕組件將像這樣結束：

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

Answer 2

在本機按鈕中，使用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所說，文本應在Text Component中呈現！ 這是您的問題：

<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')} />