javascript - 按钮没有出现

Question

注意:我是 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;
}



}

Answer 1

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

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

Edi#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>
    )
}

---

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

希望我的回答能给您带来启发并解决您的问题。快乐编码!