时间戳

首页 > 解决方案 > 如何为使用地图制作的单个元素设置样式

javascript - 如何为使用地图制作的单个元素设置样式

问题描述

我正在用 react-native 制作一个计算器应用程序。我正在创建带有地图功能的计算器按钮，但当然每个按钮看起来都一样，是否可以更改单个元素的样式，或者我应该更改按钮的创建方式。这是我的“示例”按钮

import React, {Component} from "react"; 
import { StyleSheet, Text , TouchableOpacity, } from "react-native";
    
    
    export default class InputButton extends React.Component{
        render() {
    
            const{value,handleOnPress} = this.props;
    
        return (
                <TouchableOpacity
                    style={styles.container}
                    onPress={()=> handleOnPress(value)}>
                        <Text style={styles.text}>{value}</Text>
    
                </TouchableOpacity>
    
        );
        } }
    
    const styles = StyleSheet.create(
        {
            container:{
                flex:1,
                margin: 1,
                backgroundColor: 'black',
                justifyContent:"center",
                alignItems: 'center'
            },
    
            text:{
                fontSize: 30,
                color: 'white',
                fontWeight: 'bold'
            }
    
        });

这就是我在返回整个按钮布局的主要组件中的功能：

renderButtons = () =>{

       console.log(SCREEN_WIDTH + " " + SCREEN_HEIGHT)

      if(SCREEN_HEIGHT > SCREEN_WIDTH){

        let layouts = buttons.map((buttonRows,index)=>{
            let rowItem = buttonRows.map((buttonItems,buttonIndex)=>{
                return <InputButton
                value={buttonItems}
                handleOnPress={handleInput.bind(buttonItems)}
                key={'btn-'+ buttonIndex}/>
            });
            return <View style={styles.inputRow} key={'row-' + index}>{rowItem}</View>
        });

        return layouts
      }

      
      else 
      {
        let layouts = buttons_landscape.map((buttonRows,index)=>{
          let rowItem = buttonRows.map((buttonItems,buttonIndex)=>{
              return <InputButton
              value={buttonItems}
              handleOnPress={handleInput.bind(buttonItems)}
              key={'btn-'+ buttonIndex}/>
          });
          return <View style={styles.inputRow} key={'row-' + index}>{rowItem}</View>
      });

      return layouts

      }
    }

我正在使用这些数组来制作按钮布局：

const buttons = [
    ['AC','DEL'],
    ['7','8','9','/'],
    ['4','5','6','-'],
    ['1','2','3','*'],
    ['0','.','=',,'+']
];

const buttons_landscape = [
  ['DEL','x!','e','+/-','%','AC'],
  ['10^x','√','2','8','9','/'],
  ['log10','e^x','4','5','6','-'],
  ['x^2','ln','1','2','3','*'],
  ['x^3','π','0','.','=','+']
];

我的问题是如何改变创建按钮和布局的方式，以便每个单一的都具有独特的属性或改变单一按钮的样式

标签： javascriptreact-native

解决方案

例如，您可以替换

return <View style={styles.inputRow} key={'row-' + index}>{rowItem}</View>

沿着这些思路

return <View style={someFunction(buttonItems, buttonIndex)} key={'row-' + index}>{rowItem}</View>

在哪里someFunction返回预期的样式（styles.inputRow我猜默认为 ）。

（此外，您的块是否与else块几乎相同if，唯一的区别是buttonsv. buttons_landscape？如果它接受按钮作为参数会更好，而不是重复相同的 8 行代码）。

推荐阅读