React native和scrollView

时间:2016-12-15 15:18:29

标签: react-native scrollview

我用另一个问题来解决我的问题,但我不明白我的错误。

您好,

我有反应原生滚动视图的问题,它滚动但是当我发布它回到顶部时,我该如何解决?

这是渲染:

render() {
        const { centerEverything, skeleton, container, textContainer, contentContainer, buttonContainer,
                  propHeight, propWidth, halfPropWidth, titleContainer, descContainer, title, artworkTitle,
                  desc, buttonStyle, artworkContainer, artwork } = styles;
        let CheckIndex = i => {
            if((i % 2) == 0) {
                return styles.gray
            }
        };
        let rows = this.state.rows.map((r, i) => {
            return <View key={ i } style={{ flexDirection: 'row' }}>
              <Input
                  propWidth={halfPropWidth}
                  placeholder="Ingrediente"
                  onChangeText={this.changeIngrediente.bind(this, 'quantita', i)}
                  value={this.state.date} />
              <Input
                  propWidth={halfPropWidth}
                  placeholder="Quantita"
                  onChangeText={this.changeIngrediente.bind(this, 'ingrediente', i)}
                  value={this.state.time} />
            </View>
        });
        return (
            <TouchableWithoutFeedback onPress={()=> dismissKeyboard()}>
              <View style={[centerEverything, container]}>
                <View style={[centerEverything, textContainer]}>
                  <View style={titleContainer}>
                    <Text style={[title]}>Add Event</Text>
                  </View>
                  <View style={descContainer}>
                    <Text style={[desc]}>Submit your event and we will process it in a bit ⚡️</Text>
                  </View>
                </View>
                <ScrollView style={[contentContainer, propWidth]}>
                  <View style={[centerEverything, artworkContainer]}>
                    <TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>
                      <View style={[centerEverything, {height: 100, width: deviceWidth*0.8}]}>
                          {
                              (() => {
                                  switch (this.state.artworkUrl) {
                                      case null:
                                          return (
                                              <View>
                                                <Text style={[artworkTitle]}>Upload event artwork</Text>
                                                <Text style={[desc]}>Preferably 640x480</Text>
                                              </View>
                                          );
                                      case '':
                                          return <Spinner size="small"/>
                                      default:
                                          return(
                                              <Image style={artwork} source={{uri: this.state.artworkUrl}} />
                                          )
                                  }
                              })()
                          }

                      </View>
                    </TouchableOpacity>
                  </View>
                  <Input
                      propWidth={propWidth}
                      placeholder="Event Title"
                      onChangeText={(title) => this.setState({ title })}
                      value={this.state.title} />
                  <View style={{ flexDirection: 'row' }}>
                    <Input
                        propWidth={halfPropWidth}
                        placeholder="Date"
                        onChangeText={(date) => this.setState({ date })}
                        value={this.state.date} />
                    <Input
                        propWidth={halfPropWidth}
                        placeholder="Time"
                        onChangeText={(time) => this.setState({ time })}
                        value={this.state.time} />
                  </View>
                  <View>
                      { rows }
                    <TouchableHighlight
                        onPress={ this._addRow.bind(this) }
                        style={styles.button}>
                      <Text>Aggiungi ingrediente</Text>
                    </TouchableHighlight>
                  </View>
                  <View style={{ flexDirection: 'row' }}>
                    <Input
                        propWidth={halfPropWidth}
                        placeholder="Organizer"
                        onChangeText={(organizer) => this.setState({ organizer })}
                        value={this.state.organizer} />
                    <Input
                        propWidth={halfPropWidth}
                        placeholder="Cost"
                        onChangeText={(cost) => this.setState({ cost })}
                        value={this.state.cost} />
                  </View>
                  <Input
                      propWidth={[propHeight, propWidth]}
                      placeholder="Address"
                      multiline={true}
                      onChangeText={(address) => this.setState({ address })}
                      value={this.state.address} />
                  <Input
                      propWidth={[propHeight, propWidth]}
                      placeholder="Note"
                      multiline={true}
                      onChangeText={(note) => this.setState({ note })}
                      value={this.state.note} />
                </ScrollView>
                <View style={[buttonContainer]}>
                  <ButtonComponent
                      style={buttonStyle}
                      type='primary'
                      shape='rectangle'
                      buttonState={this.state.buttonState}
                      states={this.buttonStates}
                  />
                </View>
              </View>
            </TouchableWithoutFeedback>
        )
    }

这是风格:

const styles = {
    centerEverything: {
        justifyContent: 'center',
        alignItems: 'center'
    },
    skeleton: {
        borderWidth: 1,
        borderColor: 'red'
    },
    container: {
        flex: 1,
        flexDirection: 'column',
        backgroundColor: '#F5F6F7',
        marginTop: 44
    },
    textContainer: {
        flex: 2,
        marginTop: 20
    },
    propHeight: {
        height: 80
    },
    propWidth: {
        width: deviceWidth*0.8
    },
    halfPropWidth: {
        width: deviceWidth*0.4
    },
    contentContainer: {
        flex: 1,
        width: deviceWidth,
        height: deviceHeight-200
    },
    buttonContainer: {
        width: deviceWidth,
        alignItems: 'center',
        backgroundColor: 'transparent',
        position: 'absolute',
        bottom: 20
    },
    button: {
        alignItems: 'center',
        justifyContent: 'center',
        height:55,
        backgroundColor: '#ededed',
        marginBottom:10
    },
    titleContainer: {
        width: deviceWidth*0.8,
    },
    descContainer: {
        width: deviceWidth*0.6,
    },
    title: {
        fontSize: 22,
        fontFamily: 'Helvetica Neue',
        fontWeight: '400',
        textAlign: 'center'
    },
    artworkTitle: {
        fontSize: 18
    },
    desc: {
        color: 'grey',
        fontSize: 15,
        fontFamily: 'Helvetica Neue',
        fontWeight: '300',
        textAlign: 'center'
    },
    buttonStyle: {
        height: 40,
        width: deviceWidth*0.7,
        borderRadius: 20,
        margin: 3
    },
    artworkContainer: {
        borderColor: '#9B9B9B',
        borderRadius: 3,
        borderWidth: 1 / PixelRatio.get(),
        marginBottom: 5,
        width: deviceWidth*0.8,
        height: 100
    },
    artwork: {
        width: deviceWidth*0.8,
        height: 100
    },
    listViewContainer: {
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'row',
        flexWrap: 'wrap',
    },
}

1 个答案:

答案 0 :(得分:0)

我设置了滚动的minheight属性,它似乎有效。