标签: react-native-ios

我正在为 iOS 构建一个 React Native 应用程序。facebook 文档说宽度、高度、填充、边距等需要一个数字。

我想知道样式的默认单位是什么。

<View style={styles.box}>
   <Text style={styles.text}> Test Component </Text>
</View>

var styles = ReactNative.StyleSheet.create({
       box: {
          padding: 10,
          width:100,
          height:100,
       },
       text: {
          color: 'black',
          fontSize: 30,
       },
});

我正在使用react-native-navigation启动一个包含谷歌地图的单屏应用程序，使用 - react-native-maps和一个左抽屉：

导航：

Navigation.startSingleScreenApp({
        screen: {
            screen : 'map.MapScreen',
            title : 'Map',
            navigatorStyle: {
                navBarHidden: true
            }
        },
        drawer : {
            left : {
                screen : 'drawer.DrawerScreen',
                passProps: {}
            },
            disableOpenGesture: true
        },
        animationType: 'slide-down',
        passProps: {}
    })

地图屏幕：

export default class MapScreen extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View style={styles.container}>
                <MapView
                    style={styles.map}
                    provider={PROVIDER_GOOGLE}>
                </MapView>
            </View>
        )
    }



}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center', …

我正在尝试KeyboardAvoidingView在React Native 的组件中添加页脚。我非常接近完成这项任务，但是，当他们抬起键盘时，页脚会上升，但高度会同时缩小。

这是键盘启动前的样子：

这是键盘启动后的样子：

如您所见，submit容器比没有键盘之前的容器要小。

这是我当前的代码：

render() {    
  return (
    <KeyboardAvoidingView style={{ flex: 1 }} behavior="padding">
      <View style={{ flex: 1, }}>
        <TextInput
          placeholder="Username"
          value={this.state.username}
          style={Styles.textInput}
          onChangeText={(username) => this.setState({ username })}
          autoCorrect={false}
        />
        <TextInput
          style={Styles.textInput}
          placeholder="Email"
          value={this.state.email}
          onChangeText={(email) => this.setState({ email })}
          autoCorrect={false}
        />
      </View>
      <View style={{ height: 100, backgroundColor: 'blue' }}>
        <Text>Submit</Text>
      </View>
    </KeyboardAvoidingView>
  );

我究竟做错了什么？

我有一个 react-native 应用程序，当 FlatList 在 iOS 中刷新时，我想滚动到顶部。我可以使用以下方法滚动到 FlaList 的顶部：

this.componentRef.FlatList.scrollToOffset({x: 0, y: 0, animated: true});

现在，该列表启用了下拉刷新，因此我想在 iOS 中的刷新指示器上方滚动。

我试过：

this.componentRef.FlatList.scrollToOffset({x: 0, y: -20, animated: true});

并使用 ref 将 RefreshControl 声明为 refreshcontrol（使用回调 ref 声明）：

this.componentRef.FlatList.refreshcontrol.scrollToOffset({x: 0, y: 0, animated: true});

和

this.componentRef.refreshcontrol.scrollToOffset({x: 0, y: 0, animated: true});

但没有工作。有没有人知道我可以在刷新指示器上方滚动的方法（如果它打开）？这仅在 iOS 中发生，因为 Android 的刷新指示器的工作方式不同。

更新：

由于 RefrehControl 组件无法使用 scrollToOffset，因此它不会工作。这让我回到如何在 FlatList 中的 RefreshControl 上方滚动。我的最后一次尝试：

this.FlatList.scrollToOffset({x: 0, y: 0, animated: true});

仍然滚动到列表的开头，但“RefreshControl”在视觉上是隐藏的。

我也尝试在上面添加一个空的 ScrollView 并滚动到它，因为它是空的，它不起作用。有任何想法吗？

更新 2

澄清一下，这就是一切的称呼（简化）：

Main.js 中的 _scrollAndRefresh 方法：

  _scrollAndRefresh = () …

经过几天的互联网研究,我还没有解决我的问题.我正在使用react-native-svg并且我遇到了同样的问题: 找不到名为"RNSVGPath"的视图的组件

或者这一个: 不变违规:"RNSVGSvgView"的原生组件不存在

我尝试了很多东西,包括:

react-native unlink react-native-svg
npm uninstall react-native-svg
npm install react-native-svg
react-native link react-native-svg
react-native run-ios

也:

pod 'RNSVG', :path => '../node_modules/react-native-svg'
rm -rf node_modules
npm install
react-native run-ios

但仍然没有...这是我正在使用的版本:

"dependencies": {
    "react": "16.1.1",
    "react-native": "0.50.3",
    "react-native-svg": "^6.0.1-rc.1"
}

我试图直接从XCode构建它,但仍然没有...

谢谢你的帮助!

我最近更新到了较新版本的 Xcode 和 React Native，但我的 Xcode React Native 版本出现重复符号问题。我试图从其他链接器标志中删除 -ObjC，将 No Common Blocks 更改为 No，并确保在“Link Binary with Libraries”中没有链接库两次。之前建议的这些解决方案都没有帮助；因此，任何其他想法将不胜感激。

我正在开发一个示例应用程序，在这个应用程序中需要使用 Arrow 卡来提供显示卡。我尝试过基于本机形状的反应，但我没有得到输出。

假设如果提供的文本自动增加，箭头设计形状也会增加

这是我的代码：

<View style={styles.container}>
                <View style={{ flex: 0.1, backgroundColor: "blue" }} />
                <View
                    style={{
                        flex: 0.9,
                        backgroundColor: "green",
                        justifyContent: "center",
                        alignItems: "center"
                    }}
                >
                    <View style={styles.baseTop} />
                    <View style={styles.baseBottom} />
                </View>
            </View>
baseTop: {
    borderBottomWidth: 35,
    borderBottomColor: "red",
    borderLeftWidth: 50,
    borderLeftColor: "transparent",
    borderRightWidth: 50,
    borderRightColor: "transparent",
    height: 0,
    width: 0,
    left: 0,
    top: -35,
    position: "absolute"
},
baseBottom: {
    backgroundColor: "red",
    height: 55,
    width: 100
}

这我需要像这种类型的图像，这是引用图像：

我试图查看几个 React Native 圆形滑块库，但是它们都没有按预期工作。它们都遭受相同的错误，即在您滑动时它们会随机更改值。一个例子是：

我正在寻找的是一个圆形滑块，它的值位于滑块的中间，非常像这样：

先感谢您

编辑：如果您想使用它，我已经添加了一个测试回购。我已经尽力了，但这是我能做的最好的

https://github.com/2joocy/SliderTest

代码取自这里：

https://github.com/steveliles/react-native-circular-slider-example

我正在尝试按照本地反应做.我在父视图中设置borderRadius.但孩子最重要的是.所以在最终视图中,borderRadius不可见

export default class FlexDimensionsBasics extends Component {
  render() {
    return (
      // Try removing the `flex: 1` on the parent View.
      // The parent will not have dimensions, so the children can't expand.
      // What if you add `height: 300` instead of `flex: 1`?
      <View style={{flex: 1, borderRadius:30, backgroundColor:'red'}}>
        <View style={{flexGrow: 10, backgroundColor: 'powderblue'}} />
        <View style={{flexGrow: 20, backgroundColor: 'skyblue'}} />
        <View style={{flexGrow: 30, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
}

有什么我想要添加的吗？

我是 react-native 的新手，我想在 react-native 中实现以下设计

• 蓝色圆圈是选择日期的滑块（日期选择器）
• 当日期更改时，滑块（日期选择器）内的圆圈会更改颜色
• 最后是圆圈内的图像。

如果有人可以提供参考链接或我可以用来创建图像中显示的设计的库，那就太好了。

提前致谢。