滚动视图没有出现

Question

我正在弄乱我的代码，突然 ScrollView 决定消失。

出于某种原因，ScrollView 在字符栏视图内“正常”工作 但是当它在基本视图中时，它就不存在了。

export default class CharacterSheet extends Component {

  render() {
    return ( 
      <View style={{flex:1}}>
        <View style={styles.TopBar}>
            <View>              
            </View>        
          </View>
        <View style={{flex:1}}>          
          <View style={styles.CharacterBar}>
          </View><View style={styles.Base}>
            <ScrollView style={styles.scroll}>              
              <View style={{paddingTop:72}}>

                <View style={styles.spellsBox}>
                  <Text>Hi</Text>
                </View>
                <View style={styles.spellsBox}>
                  <Text>e</Text>
                </View>
                <View style={styles.spellsBox}>
                  <Text>a</Text>
                </View>
                <View style={styles.spellsBox}>
                  <Text>Hi</Text>
                </View>
                <View style={styles.spellsBox}>
                  <Text>Hi</Text>
                </View>
                <View style={styles.spellsBox}>
                  <Text>Hi</Text>
                </View>
              </View>            
            </ScrollView>
          </View>          
          <Animated.View style={styles.CharacterStatsBar}>
          </Animated.View>          
        </View>   
      </View>
    );
  }
}

const styles = StyleSheet.create({
  CharacterBar:{
    height:72,
    backgroundColor:'#242527'
  },
  CharacterStatsBar:{
    position:'absolute',
    top: 72,
    left: 0,
    right: 0,
    height:72,
    backgroundColor:'#404040',
    borderBottomWidth:2,
    borderBottomColor:'#c53131',
    borderTopWidth:1,
    borderTopColor:'#838383',
  },
  Base:{
    flex:1,
    backgroundColor:'#fff',
  },
  scroll:{
    width:'95%',
    alignSelf:'center'
  },
  spellsBox:{
    height:80,  
    marginTop:10,  
    paddingVertical:10,
    borderColor:'#777',
    borderWidth:3,
    justifyContent:'center'
  }
});

我正在尝试在安卓设备上运行它

这个问题很烦人，让我有点压力。

Answer 1

试试这样，不要将 ScrollView 包裹在多个 View 中。

<View style={{flex:1}}>
    <View style={styles.TopBar}>
        <View>              
        </View>        
      </View>      
        <ScrollView style={styles.scroll}>              
          <View style={{paddingTop:72}}>

            <View style={styles.spellsBox}>
              <Text>Hi</Text>
            </View>
            <View style={styles.spellsBox}>
              <Text>e</Text>
            </View>
            <View style={styles.spellsBox}>
              <Text>a</Text>
            </View>
            <View style={styles.spellsBox}>
              <Text>Hi</Text>
            </View>
            <View style={styles.spellsBox}>
              <Text>Hi</Text>
            </View>
            <View style={styles.spellsBox}>
              <Text>byee</Text>
            </View>
          </View>            
        </ScrollView>         
  </View>