Expo xde 不使用样式

Question

当我运行在沙箱 https://snackexpo.io 中跟踪代码时，它工作正常。但是，当我从 Expo xde 运行得到 Invariant Violation: Scrollview child layout must be applied through the contentContainerStyle prop.

import React from 'react';
import { Button, StyleSheet,   ScrollView } from 'react-native';



export default class App extends React.Component {
  blockJS(){
  const done = Date.now() + 5000
  console.log('blocking')
  while(Date.now() < done){done}
  console.log('not blocking')

  }
  render() {
    return (

      <ScrollView style={styles.container}>
        <Button title='Block js' onPress={()=> this.blockJS()}/>
      </ScrollView>

    )
  }
}

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

Answer 1

ScrollView 不支持 alignItems 和 justifyContent 除非它作为 contentContainerStyle 或 wrap 传递你的内容并传递 styles 给他们。

您可以按如下方式更改

<ScrollView contentContainerStyle={styles.container}>
        <Button title='Block js' onPress={()=> this.blockJS()}/>
      </ScrollView>

或作为包装器

// flex will only be applied on contentContainer to get it inherited
<ScrollView contentContainerStyle={{flex: 1}}>
                <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                    <Text>Some sample text</Text>
                </View>
            </ScrollView>

Expo xde 不使用样式

Expo xde not using style

scrollview

react-native