javascript - 按钮未出现
<p><p><strong>注意:我是 React Native 的新手。</strong>下面的代码应该是使用 React Native 运行的计算器。我在显示此计算器代码的按钮时遇到问题。代码运行时没有报错，所以不明白为什么没有出现按钮。</p>
<p>代码如下:</p>
<pre><code>import React, { Component } from 'react';
import {
View,
Text,
AppRegistry,
StyleSheet,
} from 'react-native';
const inputButtons = [
,
,
,
];
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;
let inputRow = [];
for (var i = 0; i < row.length; i ++) {
let input = row;
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>
)
}
}
</code></pre>
<p><strong>最新代码:</strong> - 当我没有收到错误时收到错误，按钮出现在不正确的位置。</p>
<pre><code>import React, { Component } from 'react';
import {
View,
Text,
AppRegistry,
StyleSheet,
Button,
TouchableHighlight,
} from 'react-native';
const inputButton = [
,
,
,
];
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;
let inputRow = [];
for (var i = 0; i < row.length; i ++) {
let input = row.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;
}
}
</code></pre></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>在你的代码上我发现了一些问题:</p>
<p><strong>1.</strong> 方法 <code>this._renderInputButton()</code> 未定义，因为当您声明该方法时，您会编写 <code>_renderinputButton()</code>。您必须调用具有相同名称的方法。 (React Native 区分大小写)</p>
<p><strong>2.</strong> 我没有在您的代码中找到组件 <code>InputButton</code>。您如何创建组件？</p>
<p>我认为你的代码不能这样工作的问题。也许你可以告诉我你在哪里得到代码。</p>
<p><em>编辑</em>#1</p>
<p>您可以创建 <code>InputButton</code> 与文件 <code>index.js</code> 分开。然后写入文件 <code>InputButton.js</code> :</p>
<pre><code>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>
)
}
}
</code></pre>
<p>你可以在 index.js 文件中添加 <code>import InputButton from './InputButton'</code> 像:</p>
<p></p><div class="snippet"data-lang="js"data-hide="false"data-console="true"data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
import { View, Text, AppRegistry, StyleSheet } from 'react-native';
import InputButton from './InputButton';
const inputButton = [
,
,
,
,
];
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;
let inputRow = [];
for (var i = 0; i < row.length; i++) {
let input = row;
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>
);
}
}</code></pre>
<p style="font-size: 20px;">关于javascript - 按钮未出现，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/45154539/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/45154539/
</a>
</p>
页:
[1]