Я читаю Изучение React Native от Bonnie Eisenman, и у меня возникают проблемы с учебником WeatherProject в главе 3. Когда приложение загружается в iOS-симулятор, оно появляется быть рендеринг содержимого Forecast.js, но занимая весь экран без ничего от WeatherProject.jsПросмотр отображения не является тем, что я ожидаю при использовании реакции-родной
Вот мой код:
index.ios.js
import {
AppRegistry,
} from 'react-native';
import WeatherProject from './WeatherProject';
AppRegistry.registerComponent('WeatherProject',() => WeatherProject);
WeatherProject.js
import React, {
Component,
} from 'react';
import {
StyleSheet,
Text,
View,
TextInput,
} from 'react-native';
var Forecast = require('./Forecast');
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#4D4D4D'
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10
},
input: {
fontSize: 20,
borderWidth: 2,
height: 40
}
});
var WeatherProject = React.createClass({
getInitialState() {
return {
zip: '',
forecast: {
main: 'Clouds',
description: 'few clouds',
temp: 45.7
}
}
},
_handleTextChange(event) {
console.log(event.nativeEvent.text);
this.setState({
zip: event.nativeEvent.text
});
},
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
You input {this.state.zip}.
</Text>
<Forecast
main={this.state.forecast.main}
description={this.state.forecast.description}
temp={this.state.forecast.temp}/>
<TextInput
style={styles.input}
returnKeyType="go"
onSubmitEditing={this._handleTextChange}/>
</View>
);
}
});
module.exports = WeatherProject;
Forecast.js
import React, {
Component,
} from 'react';
import {
StyleSheet,
Text,
View,
} from 'react-native';
var styles = StyleSheet.create({
bigText: {
flex: 2,
fontSize: 20,
textAlign: 'center',
margin: 10,
color: '#FFFFFF'
},
mainText: {
flex: 1,
fontSize: 16,
textAlign: 'center',
color: '#FFFFFF'
}
});
var Forecast = React.createClass({
render() {
return (
<View>
<Text style={styles.bigText}>
{this.props.main}
</Text>
<Text style={styles.mainText}>
Current conditions: {this.props.description}
</Text>
<Text style={styles.bigText}>
{this.props.temp}°F
</Text>
</View>
);
}
});
module.exports = Forecast;
Ожидаемый результат выглядит следующим образом (из книги):
Но мой фактический результат таков:
А вот иерархия вид отладки:
Любая помощь на всех было бы весьма признателен.
Такого рода работал. Это привнесло другой текст в поле зрения, но расстояние все еще не так. Я попытался удалить все правила flex из Forecast.js, которые, похоже, делают трюк, но я, похоже, вообще не могу войти в поле ввода текста. –
В основном вы должны ставить все в поле зрения контейнеров, чтобы помочь разместить свою страницу, поэтому оберните представление обоим текстом и TextInput. –
Хорошо, я попробую. Спасибо за помощь. Я вернусь к этому, когда у меня это получится. –