Question

我无法在ScrollView下显示我的按钮。可能是什么问题？

return (
    <View style={{width: width, height: undefined}}>
        <ScrollView style={{width: width, height: undefined}}>
            <View style={{flexDirection: 'row', width: width, flexWrap: 'wrap'}}>
                {
                    this.state.photos.map((p, i) => {
                        return (
                            <SelectedPhoto
                                key={i}
                                index={i}
                                style={{
                                    width: photoWidth,
                                    height: photoWidth,
                                }}
                                limit={this.state.supportLength}
                                photo={p}
                                onSelectPhoto={this.onSelectPhoto}
                                onDeselectPhoto={this.onDeselectPhoto}
                            />
                        );
                    })
                }
            </View>
        </ScrollView>
        <View style={{margin: 20, marginBottom: 40}}>
            <Button
                raised
                onPress={this.onNext}  
                containerViewStyle={{width: width-80}}
                backgroundColor={Colors.red}
                title='NEXT' />
        </View>             
   </View>

Answer 1

这是一个例子，如你所说：

import React, { Component } from 'react';
import {
  Text, View, StyleSheet, TouchableOpacity, ScrollView, Button
} from 'react-native';
import Dimensions from 'Dimensions';

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

export default class Visit extends React.Component {
  render() {
    return (
      <View>
        <ScrollView style={{width:DeviceWidth*1, height:DeviceHeight*0.5}}>
          <Text>foo bar baz</Text>
          <Text>foo bar baz</Text>
          <Text>foo bar baz</Text>
          <Text>foo bar baz</Text>
          <Text>foo bar baz</Text>
          <Text>foo bar baz</Text>
          <Text>foo bar baz</Text>
          <Text>foo bar baz</Text>
          <Text>foo bar baz</Text>
          <Text>foo bar baz</Text>
          <Text>foo bar baz</Text>
          <Text>foo bar baz</Text>
          <Text>foo bar baz</Text>
          <Text>foo bar baz</Text>
          <Text>foo bar baz</Text>
          <Text>foo bar baz</Text>
          <Text>foo bar baz</Text>
          <Text>foo bar baz</Text>
          <Text>foo bar baz</Text>
          <Text>foo bar baz</Text>
          <Text>foo bar baz</Text>
          <Text>foo bar baz</Text>
          <Text>foo bar baz</Text>
          <Text>foo bar baz</Text>
          <Text>foo bar baz</Text>
          <Text>foo bar baz</Text>
          <Text>foo bar baz</Text>
          <Text>foo bar baz</Text>
          <Text>foo bar baz</Text>
          <Text>foo bar baz</Text>
          <Text>foo bar baz</Text>
          <Text>foo bar baz</Text>
          <Text>foo bar baz</Text>
          <Text>foo bar baz</Text>
          <Text>foo bar baz</Text>
          <Text>foo bar baz</Text>
          <Text>foo bar baz</Text>
          <Text>foo bar baz</Text>
          <Text>foo bar baz</Text>
        </ScrollView>
        <Button
        title="asdasd"
        />
      </View>
    );
  }
}

我使用Dimensions来处理屏幕尺寸，因此width:DeviceWidth*1表示宽度为100％，height:DeviceHeight*0.5表示屏幕的height为height <canvas baseChart width="400" height="400" [datasets]="lineChartData" [labels]="lineChartLabels" [options]="lineChartOptions" [colors]="lineChartColors" [legend]="lineChartLegend" [chartType]="lineChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas> 1}}

在我的视图中无法显示按钮

1 个答案: