Javascript 条件CSS未在React Native中呈现

我正在用React Native创建一个国际象棋游戏，但是我很难渲染正方形的背景色。它应该像一个规则的棋盘，黑白相间。该游戏大致基于React编写的教程，但我已经重建了前端以使用React Native。它几乎是功能性的，但我被这一个问题所困扰

我尝试过在道具和样式表上移动，调整语法，做类似的事情，但我没有取得任何进展

这是我的“square”组件（square.js）

导出默认功能方块（道具）{
返回(
);
}
const styles=StyleSheet.create({
按钮：{
填充：5，
宽度：35，
尺寸：24，
线高：2，
身高：35，
marginRight:1，
马金托普：1，
背景色：“透明”，
},
});

这是我的board组件（board.js）

const styles=StyleSheet.create({
董事会：{
flexDirection:“行”，
差额：1，
},
黑暗广场：{
背景颜色：“黑色”，
},
lightSquare：{
背景颜色：“白色”，
}
});
导出默认类板扩展React.Component{
renderSquare（i，squareShade）{
返回此.props.onPress（i）}
/>
}
render（）{
const board=[]；
for（设i=0；i<8；i++）{
常数squareRows=[]；
for（设j=0；j<8；j++）{
const squareShade=（isEven（i）和&isEven（j））| |（！isEven（i）和&isEven（j））？style.lightSquare:style.darkSquare；
push（这个renderSquare（（i*8）+j，squareShade））；
}
board.push（{squareRows}）
}
返回(
{董事会}
);
}
}
函数isEven（num）{
返回数值%2==0
}

---

我并没有收到任何错误消息，但我的印象是有些信息传递不正确。如果我在Square.js中更改背景颜色，那么它将使板上的所有正方形都显示为该颜色，但它的条件方面给我带来了问题。感谢您的帮助

其实很简单，也许你应该检查一下你的情况，试试下面的代码

const styles = {
  button: {
    width: 35,
    height: 35,
  },
};

const Square = (props) => {
  const { isEven } = props;
  const squareStyle = {
    backgroundColor: isEven ? '#000' : '#FFF',
    ...styles.button
  }

  // depending on the isEven prop background color is conditional
  return (
    <TouchableOpacity style={squareStyle}>
      <Image/>
    </TouchableOpacity>
  )
};

const styles={
按钮：{
宽度：35，
身高：35，
},
};
const Square=（道具）=>{
const{isEven}=props；
常数平方样式={
背景颜色：isEven？“#000”：“FFF”，
…样式.按钮
}
//根据isEven道具，背景颜色是有条件的
返回(
)
};

const styles = StyleSheet.create({
    boardRow: {
      flexDirection: "row",
      margin: 1,
    },
      darkSquare: {
        backgroundColor: 'black',
    },
      lightSquare: {
        backgroundColor: 'white',
    }
});

export default class Board extends React.Component {
  renderSquare(i, squareShade) {
    return <Square 
      piece = {this.props.squares[i]} 
      source = {this.props.squares[i]? this.props.squares[i].source : null}
      style = {[styles.button, this.props.styles]}
      shade = {squareShade}
      onPress={() => this.props.onPress(i)}
    />
  }

  render() {
    const board = [];
    for(let i = 0; i < 8; i++){
      const squareRows = [];
      for(let j = 0; j < 8; j++){
        const squareShade = (isEven(i) && isEven(j)) || (!isEven(i) && !isEven(j))? styles.lightSquare : styles.darkSquare;
        squareRows.push(this.renderSquare((i*8) + j, squareShade));
      }
      board.push(<View style={styles.boardRow}>{squareRows}</View>)
    }

    return (
      <View>
        {board}
      </View>
    );
  }
}

function isEven(num){
  return num % 2 == 0
}

const styles = {
  button: {
    width: 35,
    height: 35,
  },
};

const Square = (props) => {
  const { isEven } = props;
  const squareStyle = {
    backgroundColor: isEven ? '#000' : '#FFF',
    ...styles.button
  }

  // depending on the isEven prop background color is conditional
  return (
    <TouchableOpacity style={squareStyle}>
      <Image/>
    </TouchableOpacity>
  )
};