Использование flexbox с 2 компонентами, но оба не смежны - PullRequest
Новая
       12

Использование flexbox с 2 компонентами, но оба не смежны

0 голосов
/ 26 сентября 2018

Изображение здесь.

Приложение

Код

Я просто хочу, чтобы компонент Advice был близок к компоненту Weather.Как получить его?

App.js 

<View style={styles.columnLayout}>
    <Weather currentCity="Phuket"/>
    <Advice />
  </View>
const styles = StyleSheet.create({
columnLayout : {
flex : 1,
flexDirection: 'column',
}
})

Компонент Weather и Advice не использует flex.

WeatherData.js (экспорт в Weather.js) 

<View style={styles.viewStyle}>


            <View style={styles.dataStyle}>
                <Text style={styles.textStyle}>Temperature</Text>
                <Text style={styles.textStyle}>{this.props.temp} °C</Text>

            </View>
            <View style={styles.dataStyle}>
                <Image style={{ width: 80, height: 80 }} source={{ uri: `http://openweathermap.org/img/w/${this.props.icon}.png` }}></Image>
                <Text style={styles.textStyle}>{this.props.description}</Text>
            </View>
            <View style={styles.dataStyle}>
                <Text style={styles.textStyle}>Humidity</Text>
                <Text style={styles.textStyle}>{this.props.humidity} %</Text>
            </View>

        </View>
const styles = StyleSheet.create({
dataStyle: {
    backgroundColor: '#00b377',
    flex: 1,
    alignItems: "center",
    justifyContent: "center"

},

viewStyle: {
    height: 150,
    flexDirection: "row",
    justifyContent: "center"

},
textStyle: {
    color: 'white',
    textShadowColor: 'rgba(0, 0, 0, 0.75)',
     textShadowOffset: {width: -1, height: 1},
     textShadowRadius: 10
}

})

еще один компонент, использующий тот же стиль.

1 Ответ

0 голосов
/ 26 сентября 2018

Я уже добавляю код.В реактивных документах flex: 1 и flexDirection: столбец все View смежны, а мой нет.

...