im试图将我的图标保留在View组件的右侧。但是我失败了。

<StyledView>
        <StyledListItem {...props}>
            {value}
            <Icon name="add" size={24} style={{ right: 0 }} />
        </StyledListItem>
        <StyledLine></StyledLine>
    </StyledView>

样式组件：

    import styled from 'styled-components/native';
    import colors from "../../../styles/colors";
    import { styledfont } from "../../../styles/fonts";

    export const StyledList = styled.TextInput`
     height: 40px;
     border: 1px solid gray;
     width: 100%;
     padding: 0 10px;
     `;

    export const StyledListItem = styled.Text`
    ${styledfont.h4}
     color: ${colors.blue.primary};
     width: 72%;
     margin-bottom: 15px;
     margin-top: 13px;
      margin-left:28px;
     flex-direction: row;
      `;

               export const StyledView = styled.View`
   width: 100%;
   height: 68px;
  `;

   export const StyledLine = styled.View`
    width: 100%;
     height: 1px;
     background-color: ${colors.blue.primaryopc20};
     `;

    export const StyledContainer = styled.View`
    width: 100%;
    top: 0;
    flex: 1;
    `;

我尝试了很多事情，有人可以帮助我吗？我认为我应该使用诸如flex row之类的东西，但我不知道该如何应用。