Question

按钮有另一个问题。我必须将它放在最后一项下的ListView内。

以下是我使用的课程：

Notes.js：

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


export default class Note extends Component {
    render() {
        return (
            <View key={this.props.keyval} style={styles.note}>
                <Text style={styles.noteText}>{this.props.val.date}</Text>
                <Text style={styles.noteText}>{this.props.val.note}</Text>

                <TouchableOpacity onPress={this.props.deleteMethod} style={styles.noteDelete}>
                    <Text style={styles.noteDeleteText}>Del</Text>
                </TouchableOpacity>
            </View>
        );
    }
}


    const styles = StyleSheet.create({
    note: {
        position: 'relative',
        padding: 20,
        paddingRight: 100,
        borderBottomWidth:2,
        borderBottomColor: '#ededed'
    },
    noteText: {
        paddingLeft: 20,
        borderLeftWidth: 10,
        borderLeftColor: '#0000FF'
    },
    noteDelete: {
        position: 'absolute',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#2980b9',
        padding: 10,
        top: 10,
        bottom: 10,
        right: 10
    },
    noteDeleteText: {
        color: 'white'
    }
});

This is the component that I use every time when I want to create a note.

Main.js：

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

import Note from './Note';

export default class Main extends Component {

    constructor(props){
        super(props);
        this.state = {
            noteArray: [],
            noteText: '',
        };
        this.getSavedNotes(this.state.noteArray);
    }
    render() {
        let notes = this.state.noteArray.map((val, key)=>{
            return <Note key={key} keyval={key} val={val}
                    deleteMethod={()=>this.deleteNote(key)}/>
        });
        return (
            <View style={styles.container}>
                <View style={styles.header}>
                    <Text style={styles.headerText}>- NOTER -</Text>
                </View>
                <ScrollView style={styles.scrollContainer}>
                {notes}
                <TouchableOpacity onPress={ this.addNote.bind(this) } style={styles.addButton}>
                    <Text style={styles.addButtonText}>+</Text>
                </TouchableOpacity>
            </ScrollView>

                <View style={styles.footer}>
                    <TextInput 
                        style={styles.textInput}
                        placeholder='Write your note here'
                        onChangeText={(noteText)=> this.setState({noteText})}
                        value={this.state.noteText}
                        placeholderTextColor='white'
                        underlineColorAndroid='transparent'>
                    </TextInput>
                </View>

            </View>
        );
    }

    addNote(){
        if(this.state.noteText){
            var d = new Date();
            this.state.noteArray.push({
                'date':d.getFullYear()+
                "/"+(d.getMonth()+1) +
                "/"+ d.getDate(),
                'note': this.state.noteText
            });

            this.setState({ noteArray: this.state.noteArray });
            this.setState({noteText:''});
            AsyncStorage.setItem('arr', JSON.stringify(this.state.noteArray));
            alert(this.state.noteArray);
        }
    }

    deleteNote(key){
        this.state.noteArray.splice(key, 1);
        this.setState({noteArray: this.state.noteArray});
    }

    getSavedNotes = async (noteArray) =>{
      try{
        let data = await AsyncStorage.getItem('arr');
        if(JSON.parse(data))
        {
          this.state.noteArray = JSON.parse(data);v
        }
      }catch(error){
        alert(error);
      }
    }
}


    const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    header: {
        backgroundColor: '#1A237E',
        alignItems: 'center',
        justifyContent:'center',
        borderBottomWidth: 10,
        borderBottomColor: '#ddd'
    },
    headerText: {
        color: 'white',
        fontSize: 18,
        padding: 26
    },
    scrollContainer: {
        flex: 1,
        marginBottom: 100
    },
    footer: {
        position: 'absolute',
        bottom: 0,
        backgroundColor: '#000000',
        left: 0,
        right: 70,
        zIndex: 10
    },
    textInput: {
        alignSelf: 'stretch',
        color: '#fff',
        padding: 20,
        backgroundColor: '#252525',
        borderTopWidth:2,
        borderTopColor: '#ededed'
    },
    addButton: {
        position: 'absolute',
        zIndex: 11,
        right: 0,
        bottom: 0,
        backgroundColor: '#1A237E',
        width: 70,
        height: 68,
        // borderRadius: 35,
        alignItems: 'center',
        justifyContent: 'center',
        elevation: 8
    },
    addButtonText: {
        color: '#fff',
        fontSize: 24
    }
});

这是我保存笔记并在ListView内显示的位置。插入后，按钮应显示在新添加的注释下。

最后是App.js：

    import React, { Component } from 'react';
    import Main from './app/components/Main.js';


    export default class App extends Component {
      render() {
        return (
          <Main/>
        );
      }
    }

这里我只显示Main.js组件。

Answer 1

我做到了！以下是我在Main.js文件中所做的更改：

<ScrollView style={styles.scrollViewContainer}>
                <ScrollView style={styles.scrollContainer}>
                {notes}
                </ScrollView>
                <TouchableOpacity onPress={ this.addNote.bind(this) } style={styles.addButton}>
                        <Text style={styles.addButtonText}>+</Text>
                </TouchableOpacity>
            </ScrollView>

这是designSheet：

const styles = StyleSheet.create({
container: {
    flex: 1,
},
header: {
    backgroundColor: '#1A237E',
    alignItems: 'center',
    justifyContent:'center',
    borderBottomWidth: 10,
    borderBottomColor: '#ddd',
},
headerText: {
    color: 'white',
    fontSize: 18,
    padding: 26
},
scrollContainer: {
    flex: 1,
},
footer: {
    position: 'absolute',
    bottom: 0,
    height: 70,
    backgroundColor: '#000000',
    left: 0,
    right:0,
    zIndex: 10,
},
textInput: {
    alignSelf: 'stretch',
    color: '#fff',
    padding: 20,
    backgroundColor: '#252525',
    borderTopWidth:2,
    borderTopColor: '#ededed',
    marginRight: 70,
},
addButton: {
    position: 'relative',
    zIndex: 11,
    left: 0,
    top: 0,
    backgroundColor: '#1A237E',
    width: 70,
    height: 70,
    alignItems: 'center',
    justifyContent: 'center',
    elevation: 8
},
addButtonText: {
    color: '#fff',
    fontSize: 60
},
scrollViewContainer: {
    flex: 1,
    marginBottom: 70,
}

}）;

我希望这能帮助别人

ScrollView定位中的React Native Button

1 个答案: