注意:我是 React Native 的新手。 下面的代码应该是使用 React Native 运行的计算器。我在显示此计算器代码的按钮时遇到问题。代码运行时没有错误，所以我不明白为什么没有出现按钮。

代码如下:

import React, { Component } from 'react';
import {
    View,
    Text,
    AppRegistry,
    StyleSheet,
} from 'react-native';

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


const Style = StyleSheet.create({
    rootContainer: {
        flex: 1
    },

    displayContainer: {
        flex: 2,
        backgroundColor: '#193441'
    },

    inputContainer: {
        flex: 8,
        backgroundColor: '#3E606F'
    },

    inputButton: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        borderWidth: 0.5,
        borderColor: '#91AA9D'
    },

    inputButtonText: {
        fontSize: 22,
        fontWeight: 'bold',
        color: 'white'
    },
    inputRow: {
        flex: 1,
        flexDirection: 'row'
    }
});
<View style={Style.rootContainer}>
    <View style={Style.displayContainer}></View>
    <View style={Style.inputContainer}></View>
</View>

export default class ReactCalculator extends Component {

     render() {
         return (
            <View style={Style.rootContainer}>
                <View style={Style.displayContainer}></View>
                <View style={Style.inputContainer}>
                    {this._renderInputButtons()}
                </View>
            </View>
        )
    }
    _renderInputButtons() {
        let views = [];

        for (var r = 0; r < inputButtons.length; r ++) {
            let row = inputButtons[r];

            let inputRow = [];
            for (var i = 0; i < row.length; i ++) {
                let input = row[i];

                inputRow.push(
                    <InputButton value={input} key={r + "-" + i} />
                );
            }

            views.push(<View style={Style.inputRow} key={"row-" + r}>{inputRow}</View>)
        }

        return views;
    }

    render() {
    return (
        <View style={{flex: 1}}>
            <View style={{flex: 2, backgroundColor: '#193441'}}></View>
            <View style={{flex: 8, backgroundColor: '#3E606F'}}></View>
        </View>
    )

}


}

最新代码: - 当我没有收到错误时收到错误，按钮出现在不正确的位置。

import React, { Component } from 'react';
import {
    View,
    Text,
    AppRegistry,
    StyleSheet,
    Button,
    TouchableHighlight,
} from 'react-native';

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


const Style = StyleSheet.create({
    rootContainer: {
        flex: 1
    },

    displayContainer: {
        flex: 2,
        backgroundColor: '#193441'
    },

    inputContainer: {
        flex: 8,
        backgroundColor: '#3E606F'
    },

    inputButton: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        borderWidth: 0.5,
        borderColor: '#91AA9D'
    },

    inputButtonText: {
        fontSize: 22,
        fontWeight: 'bold',
        color: 'white'
    },
    inputRow: {
        flex: 1,
        flexDirection: 'row'
    }
});
<View style={Style.rootContainer}>
    <View style={Style.displayContainer}></View>
    <View style={Style.inputContainer}></View>
</View>

export default class ReactCalculator extends Component {

     render() {
         return (
            <TouchableHighlight style={Style.inputButton}
                                underlayColor="#193441"
                                onPress={this.props.onPress}>
                <Text style={Style.inputButtonText}>{this.props.value}</Text>
            </TouchableHighlight>
        )
    }
    _renderInputButton() {
    let views = [];

    for (var r = 0; r < inputButton.length; r ++) {
        let row = inputButton[r];

        let inputRow = [];
        for (var i = 0; i < row.length; i ++) {
            let input = row[i].toString();

            inputRow.push(
            <InputButton
                value={input}
                onPress={this._onInputButtonPressed.bind(this, input)}
                key={r + "-" + i}/>
        );
    }

    _onInputButtonPressed(input) {
        alert(input)
    }

        views.push(<View style={Style.inputRow} key={"row-" + r}>{inputRow}</View>)
    }

    return views;
}



}

最佳答案

在你的代码中我发现了一些问题:

1. 方法 this._renderInputButton() 未定义，因为当您声明该方法时，您编写了 _renderinputButton()。您必须调用具有相同名称的方法。 (React Native 区分大小写)

2. 我没有在您的代码中找到组件 InputButton。如何创建组件？

我认为是您的代码无法正常工作的问题。也许你可以告诉我你从哪里获得代码。

编辑#1

您可以创建与文件 index.js 分开的 InputButton。然后在文件 InputButton.js 中写入:

import React, { Component } from 'react';
import {
    View,
    Text,
    StyleSheet
} from 'react-native';

const Style = StyleSheet.create({
     inputButton: {
           flex: 1,
           alignItems: 'center',
           justifyContent: 'center',
           borderWidth: 0.5,
           borderColor: '#91AA9D',
     },
     inputButtonText: {
           fontSize: 22,
           fontWeight: 'bold',
           color: 'white',
     },
   });

  export default class InputButton extends Component {

  render() {
      return (
          <View style={Style.inputButton}>
            <Text style={Style.inputButtonText}>{this.props.value}</Text>
        </View>
    )
}

}

并且您可以在文件 index.js 中添加 import InputButton from './InputButton'，例如:

import React, { Component } from 'react';
import { View, Text, AppRegistry, StyleSheet } from 'react-native';
import InputButton from './InputButton';

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

const Style = StyleSheet.create({
  rootContainer: {
    flex: 1,
  },

  displayContainer: {
    flex: 2,
    backgroundColor: '#193441',
  },

  inputContainer: {
    flex: 8,
    backgroundColor: '#3E606F',
  },

  inputButton: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 0.5,
    borderColor: '#91AA9D',
  },

  inputButtonText: {
    fontSize: 22,
    fontWeight: 'bold',
    color: 'white',
  },
  inputRow: {
    flex: 1,
    flexDirection: 'row',
  },
});

export default class routerFlax extends Component {
  _renderInputButton() {
    let views = [];

    for (var r = 0; r < inputButton.length; r++) {
      let row = inputButton[r];

      let inputRow = [];
      for (var i = 0; i < row.length; i++) {
        let input = row[i];

        inputRow.push(<InputButton value={input} key={r + '-' + i} />);
      }

      views.push(
        <View style={Style.inputRow} key={'row-' + r}>{inputRow}</View>,
      );
    }

    return views;
  }

  render() {
    return (
      <View style={Style.rootContainer}>
        <View style={Style.displayContainer} />
        <View style={Style.inputContainer}>
          {this._renderInputButton()}
        </View>
      </View>
    );
  }
}

埃迪#2

如果你想在一个文件中声明，你可以按照下面的代码:

import React, { Component } from 'react';
import { View, Text, AppRegistry, StyleSheet, TouchableOpacity } from 'react-native';

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

const Style = StyleSheet.create({
  rootContainer: {
    flex: 1,
  },

  displayContainer: {
    flex: 2,
    backgroundColor: '#193441',
  },

  inputContainer: {
    flex: 8,
    backgroundColor: '#3E606F',
  },

  inputButton: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 0.5,
    borderColor: '#91AA9D',
  },

  inputButtonText: {
    fontSize: 22,
    fontWeight: 'bold',
    color: 'white',
  },
  inputRow: {
    flex: 1,
    flexDirection: 'row',
  },

});

const InputButton = ({value}) => {
  return (
            <View style={Style.inputButton}>
                <Text style={Style.inputButtonText}>{value}</Text>
            </View>
        )
}

export default class routerFlax extends Component {
  _renderInputButton() {
    let views = [];

    for (var r = 0; r < inputButton.length; r++) {
      let row = inputButton[r];

      let inputRow = [];
      for (var i = 0; i < row.length; i++) {
        let input = row[i];

        inputRow.push(<InputButton value={input} key={r + '-' + i} />);
      }

      views.push(
        <View style={Style.inputRow} key={'row-' + r}>{inputRow}</View>
      );
    }

    return views;
  }

  render() {
    return (
      <View style={Style.rootContainer}>
        <View style={Style.displayContainer} />
        <View style={Style.inputContainer}>
          {this._renderInputButton()}
        </View>
      </View>
    );
  }
}

刚刚添加了组件InputButton，例如:

const InputButton = ({value}) => {
return (
        <View style={Style.inputButton}>
            <Text style={Style.inputButtonText}>{value}</Text>
        </View>
    )
}

在我的模拟器中，这段代码的工作方式如下:

希望我的回答能给您思路并解决您的问题。快乐编码!

关于javascript - 按钮没有出现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45154539/