代码之家 › 专栏 › 技术社区 › ankush981

无法将元素定位到右侧

react-native

0

ankush981 · 技术社区 · 7 年前

我的应用程序屏幕上有一些元素,我希望最后一个元素位于右下角(我在Android上使用Expo客户端)。这是 render() 函数来自 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 属性,但元素没有响应,并且在三个元素之后被贴到左边缘 <TodoItem/> (除了 <Text> 从现在起)。

我很高兴在flexbox中这样做,只是我不知道如何并且在尝试时设法完全弄乱了布局。注意:|

有什么想法吗?

2 回复 | 直到 7 年前

1

Aswin Ramakrishnan 7 年前

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

2

1

LHIOUI 7 年前

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',
    }
});