如何将道具传递给 React Native 中的样式表？

Question

我有一个名为 isProfile 的道具，它由使用下面样式表的组件 (Feed) 使用。我想根据 isProfile 属性设置为 true 还是 false 有条件地渲染容器的高度。

function Feed({isProfile}){
    return(
      <View style={style.container}>
      </View>

)

}

    
const styles =  StyleSheet.create({
    container:{
       backgroundColor:colors.primary,                     
       width:windowWidth,
       justifyContent:"center",
       height: isProfile ? windowHeight : windowHeight*0.87,

    },

Answer 1

这就是我解决问题的方法。

我这样更改了样式表代码

const styles = (isProfile) => StyleSheet.create({
container:{

   backgroundColor:colors.primary,           
   width:windowWidth,
   justifyContent:"center",
   height: isProfile ? windowHeight : windowHeight*0.87,

},
)}

然后我将 prop 传递给 styleSheet

        <View style={styles(isProfile).container}>
        </View>

Answer 2

您应该将样式更改为接受参数的函数：

function Feed({isProfile}){
    return(
      <View style={createStyles(isProfile).container}>
      </View>

)

}


const createStyles = (profile) => StyleSheet.create({
    container:{
       backgroundColor:colors.primary,                     
       width:windowWidth,
       justifyContent:"center",
       height: profile ? windowHeight : windowHeight*0.87,

    },

isProfile变量(prop)是组件本地的，在外部不可见，所以必须作为参数传递

Answer 3

您可以通过使用对象数组来存储多种样式 style={[{},{}]} 等。这允许您添加我添加的第二部分

function Feed({isProfile}){
    return(
      <View style={[style.container,{height: isProfile ? windowHeight : windowHeight*0.87,}]}>
      </View>

)

}

    
const styles =  StyleSheet.create({
    container:{
       backgroundColor:colors.primary,                     
       width:windowWidth,
       justifyContent:"center",

    },

如何将道具传递给 React Native 中的样式表？

How do I pass a prop to a stylesheet in React Native?

javascript

reactjs

react-native

react-props