Кнопка, не отображающая 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

Вы пропустили кнопку импорта. Чтобы использовать компонент, вы должны импортировать этот компонент перед его использованием.

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

Просто нажмите кнопку в вашем заявлении на импорт, и я надеюсь, что это сработает.

Answer 4

Я не потратил много времени, чтобы вникнуть и найти основную причину, но вот быстрое решение. Удалите flex:1 из блока styles.button и обновите функцию рендеринга следующим образом.

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 
}} 

Проверьте скриншот, он устранит проблему.