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

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 道具来应用内联样式。我刚刚尝试定位可点击链接的底部，但找不到可以做到这一点的 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