按钮不出现

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



}

来源

2017-07-17 user1049876

尝试删除组件中的第二个渲染方法。 – tt9

@ user2313300我删除了_renderInputButtons（）并没有发生任何事情。 – user1049876

不......你的代码中有两个render（）函数。如果您的应用程序中的代码与您发布的代码相同，则在组件底部有第二个渲染功能 – tt9

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

1.方法this._renderInputButton() undefi因为当你声明你写的方法_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> 
    ) 
} 

}

而且你可以在文件指数上涨import InputButton from './InputButton'。JS这样的：

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和完成您的问题。快乐编码！

来源

2017-07-18 07:03:25 muhammadaa

我正在使用教程，但他们使用多个js文档，但我想尝试只使用一个文档。这里是链接：https://kylewbanks.com/blog/react-native-tutorial-part-2-designing-a-calculator – user1049876

我读过教程，你错过了一步。您可以为declare组件''创建InputButton.js。我编辑我的答案，你可以按照你的问题..我希望我的回答帮助你。 – muhammadaa

非常感谢！代码正在工作！ – user1049876

尝试使用普通按键为您_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';

来源

2017-07-18 06:00:28

现在出现按钮的数字，但没有出现在正确的位置。我收到了这个警告：失败的道具类型：道具'onPress'在'Button'中被标记为需要，但是它的值是'undefined'。 – user1049876

您需要制作一个功能来处理按下的按钮。由于反应识别按钮过去是可点击的，因此如果您仍然无法弄清楚如何处理按钮，则可以制作一个空白功能。对于按钮布局，您可以尝试其他布局组件，例如flexbox或gridview等。因此，您可以获得适合您需要的一个 –

我尝试使用'TouchableHighlight'而不是'View'并添加更多代码，但我仍然收到错误。我将新代码放在问题类型中。 – user1049876

回答

相关问题