[英]Button not displaying React-Native
嗨,我正在閱讀React-Native教程,並使用TouchableHighLight創建一個按鈕。 第一個按鈕正確顯示,第二個按鈕顯示帶有文本“位置”的直線。
'use strict';
import React, { Component } from 'react'
import {
StyleSheet,
Text,
TextInput,
View,
TouchableHighlight,
ActivityIndicator,
Image
} from 'react-native';
class SearchPage extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.description}>
Search for houses to buy!
</Text>
<Text style={styles.description}>
Search by place-name, postcode or search near your location.
</Text>
<View style={styles.flowRight}>
<TextInput
style={styles.searchInput}
placeholder='Search via name or postcode'/>
<TouchableHighlight style={styles.button}
underlayColor='#99d9f4'>
<Text style={styles.buttonText}>Go</Text>
</TouchableHighlight>
</View>
<TouchableHighlight style={styles.button}
underlayColor='#99d9f4'>
<Text style={styles.buttonText}>Location</Text>
</TouchableHighlight>
<Image source={require('./Resources/house.png')} style={styles.image}/>
</View>
);
}
}
var styles = StyleSheet.create({
description: {
marginBottom: 20,
fontSize: 18,
textAlign: 'center',
color: "#656565"
},
container: {
padding: 30,
marginTop: 65,
alignItems: 'center'
},
flowRight: {
flexDirection: 'row',
alignItems: 'center',
alignSelf: 'stretch'
},
buttonText: {
fontSize: 18,
color: 'white',
alignSelf: 'center'
},
button: {
height: 36,
flex: 1,
flexDirection: 'row',
backgroundColor: '#48BBEC',
borderColor: '#48BBEC',
borderWidth: 1,
borderRadius: 8,
marginBottom: 10,
alignSelf: 'stretch',
justifyContent: 'center'
},
searchInput: {
height: 36,
padding: 4,
marginRight: 5,
flex: 4,
fontSize: 18,
borderWidth: 1,
borderColor: '#48BBEC',
borderRadius: 8,
color: '#48BBEC'
},
image: {
width: 217,
height: 138
}
});
module.exports = SearchPage;
不確定是不是由於復制/粘貼導致輸入錯誤,所以代碼中缺少兩個<View>
標記。
<View style={styles.container}>
...
<View> // Missing tag for second button
<TouchableHighlight style={styles.button} underlayColor='#99d9f4'>
...
</TouchableHighlight>
</View>
</View> // Missing tag for <View style={styles.container}>
您錯過了導入Button。 要使用組件,必須先導入該組件,然后再使用它。
import {
//...
//...
View,
Button
//...
} from 'react-native';
只需將Button放在您的導入語句中,希望它能起作用。
我並沒有花很多時間來探究根本原因,但這是快速解決方法。 從styles.button塊中刪除flex:1
,並使用以下命令更新渲染功能。
class SearchPage extends Component {
render() {
let flextStyles = {
flex: 1
};
//rest of the code as it is
...
//replace go button with following code
<TouchableHighlight style={[styles.button, flextStyles]}
underlayColor='#99d9f4'>
<Text style={styles.buttonText}>Go</Text>
</TouchableHighlight>
...
//rest of the code as it is
}}
檢查屏幕截圖,它將解決問題。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.