React Native 封装nextButton组件精简代码时无法正常使用问题求助

• 核心错误：自定义组件命名不符合React规范
  React要求所有自定义组件必须以大写字母开头（帕斯卡命名法），你定义的nextButton为小写开头，React会将其识别为原生内置标签，而非你编写的自定义组件，因此无法正常渲染。
• 潜在报错点：依赖未正确导入/定义
  你代码中用到的TouchableOpacity、LinearGradient、Colors、styles、verifyNavigate等变量和组件，需要确认在当前文件已经完成导入或者声明，否则会触发运行时错误。

export const MainScreen = () => {
  // 组件名修改为大写开头的NextButton
  const NextButton = () => {
    return (
      <TouchableOpacity
        style={{ alignSelf: 'center' }}
        onPress={() => verifyNavigate()}
      >
        <LinearGradient
          colors={[Colors.Grayish_blue,
            Colors.Oval_blue,
            Colors.Dark_blue]}
          style={styles.linearGradientStyle}
        >
          <Text 
          style={styles.nextText}>next</Text>
        </LinearGradient>
      </TouchableOpacity>
    )
  }

  return (
    <NextButton />
  )
}

• 如果该按钮需要在多个页面复用，建议将NextButton单独抽离为独立的组件文件，不要嵌套在MainScreen内部定义，复用性和可维护性更高。
• 如果verifyNavigate不需要传递额外参数，onPress可以直接写为onPress={verifyNavigate}，不需要额外包裹一层箭头函数，代码更简洁。

内容的提问来源于stack exchange，提问作者emma