Question

我创建了一个可重用的组件Button.js，我将它导入两个不同的屏幕。该按钮看起来相同，但在第一个屏幕上我需要它position: 'absolute'和第二个position: 'relative'（默认值）。

如何在第一个屏幕上添加绝对位置？我试图在FirstPage.js上添加样式，但它不起作用。如何覆盖Button.js中定义的样式？

Button.js：

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

const Button = ({ position, onPress, children }) => {
  const { buttonStyle, textStyle } = styles;

    return (
        <TouchableOpacity onPress={onPress} style={buttonStyle, {'position': position}}>
            <Text style={textStyle}>{children}</Text>
        </TouchableOpacity>
    );
};

Button.defaultProps = {
  position: 'relative',
}

const styles = {
  textStyle: {
    alignSelf: 'center',
    color: '#F44336',
    fontSize: 16,
  },
  buttonStyle: {
    zIndex: 2,
    width: 100,
    backgroundColor: '#FFF',
  }
};

export { Button };

Answer 1

你可以传递道具，像这样（Button.js）（根据发布的代码编辑）：

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

const Button = ({ position, onPress, children }) => {
  const { buttonStyle, textStyle } = styles;
  const style = {...buttonStyle, position };
  return (
    <TouchableOpacity onPress={onPress} style={style}>
        <Text style={textStyle}>{children}</Text>
    </TouchableOpacity>
  );
};

Button.defaultProps = {
  position: 'relative',
}

const styles = {
  textStyle: {
    alignSelf: 'center',
    color: '#F44336',
    fontSize: 16,
  },
  buttonStyle: {
    zIndex: 2,
    width: 100,
    backgroundColor: '#FFF',
  }
};

export { Button };

你的按钮当然看起来不同，这只是你可以做的概要（基本上只是使用道具）。

Answer 2

这是可重用的按钮，为touchableOpacity。

export const NormalThemeButton = (props) => {
    return (
        <TouchableOpacity
            style={[{ ...props.style, ...styles.normalThemeBtn }]}
            style={[{ alignItems: props.align }, styles.anchor]}
            onPress={props.onPress} >
            <CustomText text={props.text} l bold style={{
                textAlign: 'center',
                color: theme['blackColor']
            }} />
             {props.children}
        </TouchableOpacity >
    );
};

这是使用此RESUABLE按钮的地方。

   style={{ ...styles.openArrivedButton }}
   text={Lng.instance.translate('useWaze')}
   onPress={() => { Waze() }}/>

希望您发现它很有帮助。

在React-Native中为可重用组件设置样式

2 个答案: