首页 > 解决方案 > 反应原生 | 标题道具按钮必须是字符串

问题描述

我在我的 react native 项目中使用React Native Paper并在iOS模拟器中运行。

单击时,Buttton我正在导航到注册页面。当我单击时,出现以下错误。

title prop button must be string

代码:

<View style={styles.middle}>
 <Animatable.View
  animation="fadeInUpBig"
> 
<Text style={styles.textContainer}>Welcome!</Text>

<View style={styles.formArea}>
  <TextInput
    left={<TextInput.Icon name="account-hard-hat" />} ƒ
    style={styles.FormControl}
    mode="outlined"
    label="Username"
    theme={{ colors: { primary: "#007fff" } }}
    value=""
  />
  <TextInput
    left={<TextInput.Icon name="lock" />}
    right={<TextInput.Icon name="eye-off" />}
    style={styles.FormControl}
    secureTextEntry={true}
    mode="outlined"
    label="Password"
    theme={{ colors: { primary: "#007fff" } }}
    value=""
  />
   <Text style={styles.ForgotPwd}> Forgot Password? </Text>
  <Button  style={[styles.Button]} mode="contained">
    <Text style={styles.ButtonText}> Sign In </Text>
  </Button>
  <Divider style={{ marginTop: 25, marginBottom: 25, backgroundColor: "#C6C6C6" }} />
  <Text style={styles.NewAccTxt}> Don't have an account?</Text>
  <Button onPress = {() => navigation.navigate('SignUp')} style={styles.Button} mode="contained">
<Text style={styles.ButtonText}> Create new one </Text>
  </Button>
</View>
</Animatable.View>

截屏:

在此处输入图像描述

标签: reactjsreact-nativereact-native-paper

解决方案


你已经这样做了

<Button  style={[styles.Button]} mode="contained">
    <Text style={styles.ButtonText}> Sign In </Text>
  </Button>

这不会起作用,因为 React Native 需要这样的东西

  <Button title={styles.ButtonText} style={[styles.Button]} />

最好使用 TouchableOpacity 之类的东西,但按钮标题是必需的道具


推荐阅读