问题

我理解你想要的只是代码的中文翻译部分，以下是翻译好的代码部分：

im trying to make a to-do list in react native and im trying to make the input and plus bar stick to the bottom and make it go up when i open the keyboard. when i use padding the bar sticks to bottom but i want to use flexbox to make it compatible with all phones. can someone help make stick it to bottom and make it go up with keyboard

task.js

import React from 'react';
import { View, Text, SafeAreaView, StyleSheet, TextInput, KeyboardAvoidingView, TouchableWithoutFeedback, TouchableOpacity } from 'react-native';

const AddTask = () => {
    const handleAddTask = () => {
        Keyboard.dismiss();
        setTaskItems([...taskItems, task])
        setTask(null);
    }

    return (
        <KeyboardAvoidingView 
            behavior={Platform.OS === "ios" ? "padding" : "height"}
            style ={styles.inputbuttons}
        >
            <TextInput style={styles.input} placeholder={'写一个任务'}  />
            <TouchableOpacity onPress={() => handleAddTask()}>
                <View style = {styles.plus}>
                    <Text>+</Text>
                </View>
            </TouchableOpacity>
        </KeyboardAvoidingView>
    );
};

const styles = StyleSheet.create({
    input: {
        height: 60,
        width:320,
        margin: 12,
        borderWidth: 1,
        padding: 10,
        borderRadius:20,
    },
    inputbuttons: {
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'flex-end'
    },
    plus: {
        width:60,
        height:60,
        borderWidth:1,
        borderColor:'black',
        textAlign:'right',
        borderRadius:'15',
        textAlign: 'center',
        justifyContent: 'center',
        fontSize:30
    }
});

export default AddTask;

app.js

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button, Alert, Input } from 'react-native';
import Task from './components/Task';
import AddTask from './components/AddTask';

export default function App() {
    return (
        <View style={styles.container}>

            <View style = {styles.taskWrapper}>
                <Text style={styles.header}>今天的任务</Text>
            </View>

            <View style={styles.tasks}>
                <Task></Task>
                <Task></Task>
            </View>

            <View>
                <AddTask></AddTask>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#E8EAED',
    },
    taskWrapper: {
        paddingTop: 80,
        paddingHorizontal: 20
    },
    header: {
        fontSize: 24,
        fontWeight:'bold'
    },
    tasks: {

    },
});

希望这对你有所帮助。如果有任何其他问题，请随时告诉我。

    import React from 'react';
import {View, Text, SafeAreaView, StyleSheet, TextInput,KeyboardAvoidingView, TouchableWithoutFeedback, TouchableOpacity} from 'react-native';
const AddTask = () => {
const handleAddTask = () => {
Keyboard.dismiss();
setTaskItems([...taskItems, task])
setTask(null);
}
return (
<KeyboardAvoidingView 
behavior={Platform.OS === "ios" ? "padding" : "height"}
style ={styles.inputbuttons}
>
<TextInput style={styles.input} placeholder={'Write a task'}  />
<TouchableOpacity onPress={() => handleAddTask()}>
<View style = {styles.plus}>
<Text>+</Text>
</View>
</TouchableOpacity>
</KeyboardAvoidingView>
);
};
const styles = StyleSheet.create({
input: {
height: 60,
width:320,
margin: 12,
borderWidth: 1,
padding: 10,
borderRadius:20,
},
inputbuttons:{
flexDirection:'row',
alignItems:'center',
justifyContent:'flex-end'
},
plus:{
width:60,
height:60,
borderWidth:1,
borderColor:'black',
textAlign:'right',
borderRadius:'15',
textAlign: 'center',
justifyContent: 'center',
fontSize:30
}
});
export default AddTask;

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View,Button, Alert,Input } from 'react-native';
import Task from './components/Task';
import AddTask from './components/AddTask';
export default function App() {
return (
<View style={styles.container}>
<View style = {styles.taskWrapper}>
<Text style={styles.header}>Today's Tasks</Text>
</View>
<View style={styles.tasks}>
<Task></Task>
<Task></Task>
</View>
<View>
<AddTask></AddTask>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#E8EAED',
},
taskWrapper:{
paddingTop:80,
paddingHorizontal:20
},
header:{
fontSize:24,
fontWeight:'bold'
},
tasks:{
},
});

答案1

得分: 0

你应该在你的应用组件中使用KeyboardAvoidingView，这样每当键盘激活时，App组件就会被推动。