Question

当我在沙箱https://snackexpo.io中运行以下代码时，它可以正常工作。但是当我从Expo xde运行时，我得到了不变违规：必须通过contentContainerStyle prop来应用Scrollview子布局。

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或换行传递给您的内容，并将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>

世博xde不使用风格

1 个答案: