按钮没有出现

Question

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

代码如下：

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;
}



}

Answer 1

尝试为您的 _renderInputButton 函数使用常规按钮

_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(
                <Button title={input}
                        key={r + "-" + i} />
            );
        }

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

    return views;
}

并且不要忘记导入按钮组件

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

Answer 2

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

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

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

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

编辑#1

您可以创建 InputButton 与文件 index.js 分开。然后写入文件 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>
    )
}

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

希望我的回答能给您带来ide并解决您的问题。编码愉快！

按钮没有出现

Buttons are not appearing

javascript

ios

react-native

expo