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>
  );

首先在上面的代码中我制作了一个导航标题。我希望标题下面的内容是scrollview。但是上面的代码似乎不起作用，并且在垂直方向上屏幕的一半后我看不到任何视图吗？我在这里做错了什么？如何在上面的代码中使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>
);

滚动视图在React Native中无法正常工作

2 个答案: