按钮不显示React-Native

Question

嗨我正在阅读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; 

Answer 1

它看起来不错。 Android Emulator, Android 6.0, API 23, Google APIs Intel Atom (x86)

Answer 2

不确定是复制/粘贴导致错字，在代码中有两个缺少<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}> 

Answer 3

您错过了导入Button。要使用组件，必须先导入该组件，然后再使用它。

import { 
    //... 
    //... 
    View, 
    Button 
    //... 
} from 'react-native'; 

只要把你的导入语句中的按钮，我希望它的作品。

Answer 4

我没有花很多时间去挖掘和找到问题的根源，但这里是速战速决。从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 
}} 

检查截图，它会解决问题。