按钮不出现
注意:我是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()
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和完成您的问题。快乐编码!
我正在使用教程,但他们使用多个js文档,但我想尝试只使用一个文档。这里是链接:https://kylewbanks.com/blog/react-native-tutorial-part-2-designing-a-calculator – user1049876
我读过教程,你错过了一步。您可以为declare组件'
非常感谢!代码正在工作! – 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';
现在出现按钮的数字,但没有出现在正确的位置。我收到了这个警告:失败的道具类型:道具'onPress'在'Button'中被标记为需要,但是它的值是'undefined'。 – user1049876
您需要制作一个功能来处理按下的按钮。由于反应识别按钮过去是可点击的,因此如果您仍然无法弄清楚如何处理按钮,则可以制作一个空白功能。 对于按钮布局,您可以尝试其他布局组件,例如flexbox或gridview等。因此,您可以获得适合您需要的一个 –
我尝试使用'TouchableHighlight'而不是'View'并添加更多代码,但我仍然收到错误。我将新代码放在问题类型中。 – user1049876
尝试删除组件中的第二个渲染方法。 – tt9
@ user2313300我删除了_renderInputButtons()并没有发生任何事情。 – user1049876
不......你的代码中有两个render()函数。如果您的应用程序中的代码与您发布的代码相同,则在组件底部有第二个渲染功能 – tt9