如何为反应本机创建背景图像和按钮的公共组件？

Question

我是反应原生开发的新手。我想为背景图像创建一个通用组件，也可以为不同类中的按钮使用。如何创建这个。

在此先感谢

Answer 1

什么，我做的是对的src/组件名称的文件夹。在那里创建一个common/目录。现在创建一个文件名称Button.js

您可以在该按钮中定义所需的全部内容。在我的情况下，我通过按钮的onPress动作一些样式的按钮和一些文本的按钮。

您也可以称为“孩子们”的属性，如果你想把什么东西裹在标签传承给像例子中的组件的下方

<Button>children</Button> 

我的组件看起来像这样

import React from 'react' 
import { 
    Text, 
    TouchableOpacity, 
    StyleSheet 
} from 'react-native' 

const Button = ({ children, onPress, style, buttonTextStyle }) => { 
    const { 
     buttonStyle, 
     textStyle 
    } = styles 

    return (
    <TouchableOpacity style={[buttonStyle, style]} onPress={onPress}> 
     <Text style={[textStyle, buttonTextStyle]}> 
     {children} 
     </Text> 
    </TouchableOpacity> 
) 
} 

const styles = StyleSheet.create({ 
    textStyle: { 
    alignSelf: 'center', 
    color: '#FFFFFF', 
    fontSize: 16, 
    fontWeight: '600', 
    paddingTop: 10, 
    paddingBottom: 10 
    }, 
    buttonStyle: { 
    flex: 1, 
    alignSelf: 'stretch', 
    backgroundColor: '#17b5b3' 
    } 
}) 

export { Button } 

您可以使用TouchableOpacity组件从react-native或TouchableWithoutFeedback或其他任何方式使用TouchableOpacity进行演示。

您可以通过该文件夹

import Button from './common/Button'