Question

我正在尝试为经纬度指定的世界某个地方的天气制作应用程序。事实是，当我检查屏幕时，应用程序仅在屏幕中央显示1/5，并执行了显示温度的功能。由于我的声誉，无法上传图片。但是想象一下这是屏幕：[---- ||| ----]仅|||部分显示。

我对react-native不太了解，所以我只是搜索并做其他人所做的事情，我曾尝试为该类强制使用“全局”视图样式，但是如果您不将其放在渲染器中，它似乎没有用，返回我无法移动的部分，至少是我尝试过的地方。

函数中未包含代码。

class WeatherScreen extends React.Component {
    state = {
        isLoading: true,
        temperature: 0,
        weatherCondition: null,
        error: null
    };
    componentDidMount() {
        ...
    } 
    fetchWeather(lat, lon) {
        fetch(....
    }


    render() {
    const { isLoading, weatherCondition, temperature } = this.state;
    return (
        <View style={styles.container}>
            {isLoading ? (
                <View style={styles.loadingContainer}>
                    <Text style={styles.loadingText}>Fetching The Weather</Text>
                </View>
            ) : (
                <Weather weather={weatherCondition} temperature={temperature}/>
            )}
        </View>
    );
  }
}
export default WeatherScreen;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

Answer 1

请勿在主屏幕上应用alignItems和justifyContent，它将使屏幕居中。如果您希望内容位于中心，则将这些属性添加到主容器/视图的儿童视图中。还可以从本机尺寸获取屏幕的宽度和高度，并将其添加到主容器样式（高度，宽度）中。

尝试

import { Dimensions } from 'react-native';

const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;

class YourClass extends Component {
...your code ...
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        height: height,
        width: width
    },
});

功能无法充满整个屏幕

1 个答案: