在React Native中将道具传递到外部样式表中

我是新手反应和反应天然的。目前，对于每个组件，我将代码分为2个单独的文件：

index.js对于所有反应代码，;
styles.js用于样式表

有没有办法将道具传递到外部样式表？

示例： index.js：

render() {
  const iconColor = this.props.color || '#000';
  const iconSize = this.props.size || 25;
  return (
    <Icon style={styles.icon} />
  );
}

示例styles.js：

const styles = StyleSheet.create({
  icon : {
    color: iconColor,
    fontSize: iconSize
  }
});

上面的代码不起作用，但是更多的是要阐明我要做的事情。任何帮助都非常感谢！

我宁愿将我的样式放在单独的文件样式中。内部样式：

export const styles = (props) => StyleSheet.create({
        icon : {
        color: props.iconColor,
        fontSize: props.iconSize
      }
    }

在您的主班上您可以通过值

return (
    <Icon style={styles(this.props).icon} />
  );

另外，您可以直接价值所以它将是

export const styles = (iconColor,iconSize) => StyleSheet.create({
    icon : {
    color: iconColor,
    fontSize: iconSize
  }
}

和您的主类内部

return (
    <Icon style={styles(this.props,iconColor, 
this.props.iconSize).icon} />
 );

我在样式表中发送nofooter boolean prop

   <View style={styles.mainFooterCont(noFooter)}>
     <Text> Testing </Text>
    </View>

并像

一样接受它

  mainFooterCont: noFooter => ({
   flexDirection: 'row',
   justifyContent: 'space-between',
   alignItems: 'flex-end',
   paddingBottom: noFooter ? 0 : 20,
   paddingTop: Metrics.ratio(noFooter ? 0 : 5),
   }),

创建一个将ICONCOLOR和ICONSIZE的类创建为参数并返回样式表对象

// styles.js
export default class StyleSheetFactory {
    static getSheet(iconSize, iconColor) {
        return StyleSheet.create({
            icon : {
                color: iconColor,
                fontSize: iconSize
            }
        })
    }
}
// index.js
render() {
    let myStyleSheet = StyleSheetFactory.getSheet(64, 'red')
}

只需在一个函数中包装样式表，您可以选择通过道具。

而不是：

const styles = StyleSheet.create({
  Title: { color: 'white' }
});

你做：

const styles = (props?: any) => StyleSheet.create({
  Title: { color: 'white' }
});

现在，当您将它们添加到组件中时，而不是

style={styles.Title}

你做：

style={styles(propsObjectHere).Title}

，由于这是可选的，而且您没有道具可以通过，只需做：

style={styles().Title}

P.S。如果您出于某种原因，请忽略类型，而不是使用Typescript：P

如果您不喜欢创建类评估条件。这是Exmple

export const Style = StyleSheet.create({
 locatorTextInputContainer: locatorType => ({
        flexDirection: 'row',
        backgroundColor: locatorType == 'None' || locatorType == '' ? GColors.separatorColor : GColors.white,
        marginBottom: 10,
        paddingBottom: 5,
        marginStart: 10,
        marginEnd: 10,
   })
})

您可以按以下方式使用它

 <View style={Style.locatorTextInputContainer(locatorType)}>
    <TextInput
        value={sourceLocator}
        onChangeText={(text) => {
            dispatch(setSourceLocator(text))
        }}/>
 </View>

这是一个更简单的解决方案。

组件

 <View
    style={{
      ...styles?.tabItem_bottomView,
      backgroundColor: selected ? Color?.blue : Color?.white,
    }}
  />

您可以像以前一样使用样式表。在那里没有任何编辑。

解决方案：

render() {
   const iconColor = this.props.color || '#000';
   const iconSize = this.props.size || 25;
   return (
   <Icon style={{...styles.icon, color: iconColor, fontSize: iconSize }} />

示例样式：

  const styles = StyleSheet.create({
  icon : {
    color: iconColor,
    fontSize: iconSize
  }})

，而不是将道具传递给样式表，我们可以创建样式表函数，然后在主函数中调用它。然后，我们可以将该变量用于该功能。我们甚至不会遇到打字稿错误。

const getStyles = (theme: any) =>
  StyleSheet.create({
    container: {
      backgroundColor: theme.backgroundVariant,
    },
 })

现在创建函数后，我们可以像以下一个

一样调用主函数中的函数

const styles = getStyles(theme);

以下是如何实现代码

的示例

const Register = memo((_props: RegisterProps) => {
  const theme = useSelector(state => state.theme);
  const styles = getStyles(theme);
  return <View style={styles.container}></View>;
});

对于使用Typescript的人：

这里提供的答案很棒。

作者说：

样式表就像静态的东西！您不应该向此提出论据！您要做的就是使用数组传递样式。

因此，我们这样做：

<View
    style={[
        styles.tabItem_bottomView,
        { backgroundColor: selected ? Color.blue : Color.white }
    ]}
/>

我们实现的@Belsim Jarosh答案的一种替代方法是将主题与样式文件集成在一起，并使用参数来发送其他道具，例如width，height等，诸如dimensions.get.get（'get）窗口'）这样：

import { StyleSheet } from 'react-native';
import { theme } from '../path/to/theme.ts'
type Props = {
  width: any;
}
const getStyles = (props: Props) =>
  StyleSheet.create({
    container: {
      backgroundColor: theme.backgroundVariant,
      width: props.width * 0.7;
  },
})

因此，我们将getStyles分配给常数：

const styles = getStyles(theme);

实施代码的示例：

...
import { Dimensions, View } from 'react-native';
import { getStyles } from '../path/to/getStyles.ts';
  
const Register = () => {
  const { width } = Dimensions.get('window');
  const styles = getStyles({ width });
  return <View style={styles.container}></View>;
};

相关内容

最新更新

热门标签：