时间戳

首页 > 解决方案 > 使用具有 2 个组件但都不相邻的 flexbox

reactjs - 使用具有 2 个组件但都不相邻的 flexbox

问题描述

图片在这里。

应用程序

代码

我只想要靠近 Weather 组件的 Advice 组件。我怎么才能得到它 ？

应用程序.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
}

})

另一个使用相同样式的组件。

标签： reactjsreact-nativeflexboxreact-native-android

解决方案

我已经添加了代码。在 react-native 文档中 flex : 1 和 flexDirection : column 所有视图都是相邻的，但我的不是。

推荐阅读