小编Kis*_*ore的帖子

样式与ScrollView中的contentContainerStyle?

当我申请{alignItems: 'center', justifyContent: 'center'}style道具,得到了下面的错误,

ScrollView子布局必须通过contentContainerStyle属性应用

然后将相同的样式应用于contentContainerStyle并正常工作 我无法理解之间的基本差异stylecontentContainerStyle以及何时使用它们。

我假设当ScrollView被调用时,两个views被调用。style适用于父母ViewcontentContainerStyle适用于儿童View

如果我错了,请纠正我。谢谢。

scrollview react-native

12
推荐指数
1
解决办法
2467
查看次数

7
推荐指数
1
解决办法
5851
查看次数

如何使用react-native动画在一段时间后自动淡出文本

通过使用以下代码,我可以淡入一些文本,

class AnimatedClass extends Component {
   constructor(props) {
      super(props);

      this.state = {fadeIn: new Animated.Value(0),
                    fadeOut: new Animated.Value(1),
                   };
   }

   fadeIn() {
     this.state.fadeIn.setValue(0)                  
     Animated.timing(
       this.state.fadeIn,           
       {
         toValue: 1,                   
         duration: 3000,              
       }
     ).start(() => this.fadeOut());                        
  }

  fadeOut() {
    this.state.fadeOut.setValue(1)
    Animated.timing(                  
       this.state.fadeOut,            
       {
         toValue: 0,                   
         duration: 3000,              
       }
    ).start();                        
  }

  render() {
    return(
       <View style={{flex: 1, backgroundColor: '#efefef'}}>
           <TouchableOpacity 
               onPress={() => this.fadeIn()} 
               style={Styles.submitButtonStyle}
               activeOpacity={0.5}
           >
               <Text style={Styles.submitTextStyle}>Submit</Text>
           </TouchableOpacity>

           <Animated.View                 
              style={{opacity: this.state.fadeIn}}
           >
              <View style={Styles.textContainer}>
                <Text style={{fontSize: 20, textAlign: 'center'}}>Your order has been submitted</Text> …
Run Code Online (Sandbox Code Playgroud)

animation react-native

7
推荐指数
1
解决办法
6630
查看次数

React-Native:onPanResponderGrant 与 onPanResponderStart

PanResponder.create()有很多回调,其中两个是onPanResponderGrantand onPanResponderStart。触摸屏幕后,两个回调都会被触发。react-native官方文档没有太多关于这些回调的信息。

任何人都可以让我知道这两个回调之间的区别以及何时使用哪一个?

react-native

6
推荐指数
1
解决办法
440
查看次数

如何一次全局设置自定义字体系列并在整个本机应用程序中使用而不调用每个“文本”组件?

根据此堆栈溢出解决方案,可以通过在每个Text组件中调用自定义字体来使用它。但是当我们Text的应用程序中有数千个组件时,我们可能会碰巧错过相同的字体系列。然后我们在字体系列的情况下失去一致性。

因此,有没有办法通过不调用每个Text组件来使用自定义字体系列?

react-native react-native-android react-native-ios

5
推荐指数
1
解决办法
7114
查看次数

React-Native:触摸 TextInput 一侧时,“onBlur”不会被触发

   <TextInput
        ref={ ref => this.mobileNumberRef = ref}
        keyboardType='phone-pad'
        returnKeyType='done'
        onBlur={() => Keyboard.dismiss()}
   />
Run Code Online (Sandbox Code Playgroud)

当触摸到该区域之外时,我想关闭键盘TextInput。但并onBlur()没有被解雇。

有人可以让我知道如何实现这一目标吗?谢谢你!

onblur react-native

5
推荐指数
1
解决办法
7622
查看次数

如何在不改变子元素位置的情况下将视图对齐到中心?

<View style={{height: '100%', width: '100%'}}>
   {OtherContent}
   <ScrollView>
      <View style={{flexDirection: 'row', flexWrap: 'wrap', padding: 20}}>
           {children}
      </View>
   <ScrollView> 
</View>
Run Code Online (Sandbox Code Playgroud)

我希望View内部ScrollView位于屏幕中央而不改变其子位置

孩子们:

<View style={Styles.docsContainer}>
            {arr.map((document, index) => {
                return (
                    <TouchableOpacity key={index} style={[Style.docStyle} onPress={null}>
                        <Icon name='file-text-o'/>
                        <Text>{document.name}</Text>
                    </TouchableOpacity>
                );
            })}
</View>
const Styles: {
    docsContainer: {
       flexDirection: 'row',
       flexWrap: 'wrap',
       padding: 20,
    },
    docStyle: {
      alignItems: 'center', 
      padding: 20,
      margin: 5,
      marginBottom: 10,
      borderRadius: 8,
      width: 170
    }
Run Code Online (Sandbox Code Playgroud)

}

flexbox react-native

3
推荐指数
1
解决办法
3710
查看次数

React-Native : How to get the complete height of the device when 'Full Screen Mode' is enabled?

我正在Window通过Dimensions.get('window').height在屏幕上使用和渲染内容来提高身高。但是,Full Screen Mode启用后,硬件按钮将被隐藏,这会导致屏幕上有额外的空间。但是仍然Dimensions.get('window').height具有与以前相同的高度(Full Screen Mode禁用时)。最终,屏幕最终会留下多余的空间。

有什么办法react-native可以渲染内容Full Screen Mode

而且,启用“全屏模式”时如何获取设备的完整高度?

android-fullscreen react-native react-native-android

3
推荐指数
1
解决办法
1340
查看次数

'react-native run-android' 正在 android 设备中加载旧包

最近我格式化了我的机器并重新安装了操作系统。从那时起,当我运行react-native run-android旧包时,我的 android 设备中安装了旧包。但在模拟器中,正在加载更新的包。

根据这个安卓操作系统必须是安卓 5 及更高版本,但我的是安卓 8(奥利奥)。

即使我试图遵循这些建议,但这似乎是一种解决方法,并且每次更新不是永久解决方案的代码的单个字符时都必须运行这些命令。

据我所知,我必须在重新安装操作系统后错过做一些事情(因为在重新安装操作系统之前它很好)。

任何机构都可以帮助使新捆绑包在设备中运行。

android react-native

2
推荐指数
1
解决办法
4372
查看次数

如何在页面的特定坐标处呈现视图?

当屏幕被触摸并保持在某个位置时,我想View准确地渲染屏幕被触摸的位置(如android中的上下文菜单)。我有页面坐标pageXpageY,我想View根据这些坐标渲染一个。

有没有办法在 Style 对象中给出这些坐标,如下所示,

<View style={{X: 120, Y: 75}} />
Run Code Online (Sandbox Code Playgroud)

react-native

1
推荐指数
1
解决办法
4303
查看次数

使用scrollToOffset 时,Flatlist 不会滚动到所需的偏移量

这是我的FlatList代码

 <FlatList
    ref={ref => this.flatListRef = ref}
    data={this.state.data}
    renderItem={({ item, index }) => this.renderItems(item, index)}
    onScroll={(e) => this.handleScroll(e)}
/>
Run Code Online (Sandbox Code Playgroud)

这是handleScroll我得到的方法ScrollPosition

handleScroll(event) {
    this.props.updateAppState('scrollPosition', event.nativeEvent.contentOffset.y);
}
Run Code Online (Sandbox Code Playgroud)

最后被componentDidMount ScrollToOffset称为

componentDidMount() {
    this.flatListRef.scrollToOffset({ animated: false, offset: this.props.app.scrollPosition});
}
Run Code Online (Sandbox Code Playgroud)

FlatList从不滚动它的列表。我现在真的很无助。谁能告诉我我该怎么做才能达到scroll预期的效果offset?谢谢。

react-native react-native-flatlist

0
推荐指数
1
解决办法
4543
查看次数