滚动视图在本机反应中无法正常工作

Question

render() {
  return (
    <View style={{ flex: 1}}>
      {/*for header*/}
      <View style = {{flexDirection:'row',justifyContent:'space-between',alignItems: 'center',width:'100%',height:'10%',backgroundColor: '#BE6507',padding:10}}>
        <TouchableWithoutFeedback onPress={() =>this.props.navigation.goBack()}>
          <Image style={{width: 25, height: 25}}  source={require('../assets/back.png')} />
        </TouchableWithoutFeedback>
      <View/>
    <View/>
    {/*main content*/}
    <ScrollView style={{padding:20,paddingTop:25 }}>
      <View style={{alignItems:'center',marginBottom:20, width:Dimensions.get('window').width  * 90 / 100}}>
        <Image style={{height:"30%",width:"90%",marginBottom:10}} source={require("../assets/logo.png")}/>
        <Text style={{fontSize: 21, color: "black",margin:6,marginBottom:25}}>ADD CARD DETAILS</Text>
        <TextInput
          value={this.state.nameoncard}
          onChangeText={(nameoncard) => this.setState({ nameoncard:nameoncard })}
          placeholder={'Name On Card'}
          placeholderTextColor={'black'}
          style={styles.input}
        />
        <TextInput
          value={this.state.card_num}
          onChangeText={(card_num) => this.setState({ card_num:card_num})}
          placeholder={'Card Number'}
          placeholderTextColor={'black'}
          style={styles.input}
        />
        <TouchableOpacity style={{width:'90%',margin:10,backgroundColor:'black',padding:10,borderRadius:5,borderWidth:1,marginTop:20,marginBottom:20,height:45}}>
          <Text style={{fontSize: 19,fontWeight: 'bold', color: "white",  textAlign:'center'}}>Proceed to Pay</Text>
        </TouchableOpacity>
      </View>
    </ScrollView>
  );

在上面的代码中，我首先制作了一个用于导航的标头。我希望标题下方的内容是滚动视图。但是上面的代码似乎不起作用，并且在垂直方向的屏幕半侧后我没有看到任何视图？我在这里做错了什么？如何在上面的代码中使滚动视图正常工作？

Answer 1

你可以试试这个 scrollEnabled。

Answer 2

首先，在返回 render(( 方法时，您只能有一个孩子。因此，将View和ScrollView包裹在一个View中。您在第一部分中也有拼写错误，请查看您如何关闭这些视图：<View/>而不是</View>。

正确的代码应该是：

return (
  <View style={{ flex: 1 }}>
    {/*for header*/}
    <View
      style={{
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        width: '100%',
        height: '10%',
        backgroundColor: '#BE6507',
        padding: 10,
      }}>
      <TouchableWithoutFeedback
        onPress={() => this.props.navigation.goBack()}>
        <Image
          style={{ width: 25, height: 25 }}
          source={require('../assets/back.png')}
        />
      </TouchableWithoutFeedback>
    </View>
    {/*main content*/}
    <ScrollView style={{ padding: 20, paddingTop: 25 }}>
      <View
        style={{
          alignItems: 'center',
          marginBottom: 20,
          width: (Dimensions.get('window').width * 90) / 100,
        }}>
        <Image
          style={{ height: '30%', width: '90%', marginBottom: 10 }}
          source={require('../assets/logo.png')}
        />
        <Text
          style={{
            fontSize: 21,
            color: 'black',
            margin: 6,
            marginBottom: 25,
          }}>
          ADD CARD DETAILS
        </Text>
        <TextInput
          value={this.state.nameoncard}
          onChangeText={nameoncard =>
            this.setState({ nameoncard: nameoncard })
          }
          placeholder={'Name On Card'}
          placeholderTextColor={'black'}
          style={styles.input}
        />
        <TextInput
          value={this.state.card_num}
          onChangeText={card_num => this.setState({ card_num: card_num })}
          placeholder={'Card Number'}
          placeholderTextColor={'black'}
          style={styles.input}
        />
        <TouchableOpacity
          style={{
            width: '90%',
            margin: 10,
            backgroundColor: 'black',
            padding: 10,
            borderRadius: 5,
            borderWidth: 1,
            marginTop: 20,
            marginBottom: 20,
            height: 45,
          }}>
          <Text
            style={{
              fontSize: 19,
              fontWeight: 'bold',
              color: 'white',
              textAlign: 'center',
            }}>
            Proceed to Pay
          </Text>
        </TouchableOpacity>
      </View>
    </ScrollView>
  </View>
);