如何在本机反应中显示文本和内联按钮？

Question

我想在react-native中得到以下结果：

我使用 styled-components，我使用styled.Text作为灰色文本，使用styled.TouchableOpacity作为红色文本，但是在玩完所有样式后我无法将它们内联。

我怎样才能达到预期的效果？

编辑，在这里阅读答案后，这是我目前得到的结果：

这就是我的源代码的样子：

function App() {
  return (
    <MoreInformationContainer>
      <Typo.Caption color={ColorsEnum.GREY_DARK}>
        {_(t`Pour plus d'informations, nous t'invitons à consulter notre`)}
        <AppButton
          title={_(t`Politique des cookies`)}
          // onPress={dismissModal}
          icon={ExternalLinkSite}
          textSize={12}
          disabled
          inline
        />
      </Typo.Caption>
    </MoreInformationContainer>
  )
}
const MoreInformationContainer = styled.View({
  flexDirection: 'row',
  flexWrap: 'wrap',
  position: 'relative',
})

这是我的AppButton组件：

https://gist.github.com/83f5b6b91f015a75340d0664f79529fb

如您所见，我使用inline道具来应用内联样式。 我刚刚尝试在可点击链接的底部找到 position，但我找不到可以做到这一点的 css，有什么线索吗？

Answer 1

您可以使用

flexDirection：'行'

在父视图中显示内联

<View style={{flexDirection: 'row'}}>
  <Styled.Text />
  <Styled.TouchableOpacity />
</View>

<AppButton
  style={{bottom: -5}}
  title={_(t`Politique des cookies`)}
  // onPress={dismissModal}
  icon={ExternalLinkSite}
  textSize={12}
  disabled
  inline
/>;

Answer 2

expo 中的工作示例

  <View style = {{flexDirection:'row',flexWrap:'wrap'}}><Text style >This some text you want to render inline things to do wwhat we want<TouchableOpacity><Text>Some other text clicable</Text></TouchableOpacity> </Text></View>

https://snack.expo.io/65Rjb6L79