react native:创建组件以减少代码行数

Question

在我的例子中，我试图从以下代码创建一个名为nextButton的组件，然后我可以使用它。我做的有什么问题吗?

export const MainScreen = () => {
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 />
)
}

Answer 1

您的nextButton版本只是一个函数而不是一个组件。你不能在一个组件中创建一个组件，但是你可以在一个文件中创建多个组件。

你可以在主屏幕返回

中调用它作为函数

{nextButton()}

如果你想把它作为一个组件使用，你需要把它移出主屏幕组件体

export 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>
);
};
export const MainScreen = () => {
return <NextButton />
};

并且一定要记住，最佳实践是使用以大写字母开头的组件名称，因此将nextButton重命名为NextButton。

如果这对你有用，请给答案投票