Question

我的应用程序屏幕上有一些元素，我希望最后一个元素位于右下方（我在Android上使用Expo客户端）。以下是render()的{{1}}函数：

App.js

所以，这是我想要定位的render() { return ( <View style={styles.container}> <StatusBar hidden={true} /> <TodoItem/> <TodoItem/> <TodoItem/> <AddTodoButton style={styles.button}/> </View> ); }。这是我正在使用的样式：

<AddTodoButton\>

const styles = StyleSheet.create({ container: { backgroundColor: '#fcf7e2', height: '100%', }, button: { position: 'absolute', bottom: 0, right: 0, } });的代码如下：

AddTodoButton

我已经尝试了const Button = () => ( <Text style={styles.button}>+</Text> ); const styles = StyleSheet.create({ button: { fontSize: 30, paddingLeft: 21, paddingTop: 7, width: 60, height: 60, backgroundColor: '#FF4456', borderRadius: 60/2, overflow: 'hidden', } });属性的几种样式变体，但是元素没有响应并且在三个button之后紧靠左边缘（除了{{ 1}}截至目前）。

我很高兴在Flexbox中这样做，除了我不知道如何在我尝试时完全弄乱布局。：|

有什么想法吗？

Answer 1

查看是否只是将flex:1添加到container样式，如果没有尝试以下

render() {
   return (
    <View style={styles.container}>
        <StatusBar
            hidden={true}
        />
        <TodoItem/>
        <TodoItem/>
        <TodoItem/>
        <View style={styles.buttonContainer}>
          <AddTodoButton style={styles.button}/>
        </View>
    </View>
   );
}

// In your styles, do the following
container: {
   flex: 1
}

buttonContainer{
  flex: 1,
  flexDirection: 'row',
  justifyContent: 'flex-end',
  alignItems: 'flex-end',
  alignSelf: 'flex-end'
}

不确定您的AddTodoButton，但我建议您去那里查看是否是那个没有向右推动的人。

Answer 2

我认为你只是没有将样式应用于按钮：

const Button = (props) => (
   <Text style={[styles.button,props.style]}>+</Text>
);

const styles = StyleSheet.create({
    button: {
        fontSize: 30,
        paddingLeft: 21,
        paddingTop: 7,
        width: 60,
        height: 60,
        backgroundColor: '#FF4456',
        borderRadius: 60/2,
        overflow: 'hidden',
    }
});

无法将元素置于右侧

2 个答案: